首页
wjlink
投稿
视频
直播
壁纸
更多
留言
统计
LINK
Search
1
为你的 WordPress 站点配置 Telegram Instant View
53 阅读
2
重点提示:邮箱购买和调查帐号注册要求
46 阅读
3
Paypal外区账户/国际版绑大陆手机号注册教程
36 阅读
4
宝塔面板绑定域名套上cloudflare – 实现cdn访问拯救你的IP
35 阅读
5
Python 爬取YouTube某个频道下的所有视频信息
30 阅读
技術類
自媒体
調查
问卷调查
美國站
英國站
注册丨登录
Search
标签搜索
wordpress
V2Ray
vps
苹果cms
面板
php
宝塔
ipfs
DD
脚本
语言
上传
判断
Youtube
ip
AI
1
2
3
救砖
Gengre
累计撰写
65
篇文章
累计收到
0
条评论
今日撰写
0
篇文章
️
首页
分类
技術類
自媒体
調查
问卷调查
美國站
英國站
页面
wjlink
投稿
视频
直播
壁纸
留言
统计
LINK
登录丨注册
搜索到
1
篇与
的结果
HTML两栏实现左侧内容可滚动,右侧列表固定跟随布局
HTML实现左侧内容可滚动,右侧列表固定布局<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>HTML实现左侧内容可滚动,右侧列表固定布局</title> <style type="text/css"> html,body{ width:100%; height:100%; } html,body,header,footer,div,section{ padding:0; margin:0; } .clearfix:after{ content:''; display:block; clear:both; height:0; visibility:hidden; } .clearfix{ zoom:1; } .sec-wrapper{ min-height:100%; } .head-top{ width:100%; height:100px; line-height:100px; text-align:center; font-size:16px; color:#fff; background:#E74445; } .main-section{ padding-bottom:100px; margin:20px auto; } .foot{ width:100%; height:100px; line-height:100px; text-align:center; font-size:16px; color:#fff; background:#528FEA; margin-top:-100px; } .div-wrapper{ width:1200px; margin:0 auto; background:#F4F6F9; position:relative; } .cont-left{ width:900px; float:left; margin-right:10px; } .list-right{ float:left; } .cont-item{ width:100%; height:200px; background:tan; margin-top:10px; } .box-fixed{ width:290px; height:600px; padding-top:20px; background-color:#89A1C5; position:relative; top:0px; text-align:center; color:#fff; } .tab_fix_bottom { position: absolute; bottom: 0px; top: auto; } .tab_fix{ position:fixed; } </style> </head> <body> <section class="sec-wrapper"> <header class="head-top">页面头部</header> <section class="main-section"> <div class="div-wrapper clearfix"> <div class="cont-left"> <div class="cont-item"></div> <div class="cont-item"></div> <div class="cont-item"></div> <div class="cont-item"></div> <div class="cont-item"></div> <div class="cont-item"></div> <div class="cont-item"></div> <div class="cont-item"></div> </div> <div class="list-right"> <div class="box-fixed">新闻列表</div> </div> </div> </section> </section> <footer class="foot">页面底部</footer> <script src="/style/js/jquery-2.1.1.min.js"></script> <script type="text/javascript"> $(function(){ var fheight = $('.foot').height() + 30; // 获取底部及底部上方边距的总高度 var boxfixed = $('.box-fixed'); // 获取固定容器的jquery对象 $(window).scroll(function() { var scrollTop = $(window).scrollTop(); // 获取滚动条滚动的高度 var contLeftTop = $('.cont-left').offset().top+20; // 右侧列表相对于文档的高度 var scrollBottom = $(document).height() - $(window).scrollTop() - boxfixed.height(); if (scrollTop >= contLeftTop) { if (scrollBottom > fheight) { // 滚动条距离底部的距离大于fheight,添加tab_fix类,否则添加tab_fix_bottom类 boxfixed.removeClass("tab_fix_bottom").addClass('tab_fix'); } else { boxfixed.removeClass('tab_fix').addClass("tab_fix_bottom"); } } else if (scrollTop < contLeftTop) { boxfixed.removeClass('tab_fix').removeClass("tab_fix_bottom"); } }); }); </script> </body> </html>
2024年02月29日
2 阅读
0 评论
0 点赞