我想让盒子滑动的时候才在最上面图层,不滑动屏幕的时候,它保持在最下面图层
1条回答 默认 最新
- 你好!机器人 2022-06-22 22:17关注
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>导航栏吸顶效果</title> <style type="text/css"> html, body { width: 100%; min-width: 320px; max-width: 750px; margin: 0 auto; background: #FAFBFC; color: #fff; font: normal 14px/1.5 "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif; } .top{background-color: greenyellow;height: 50px; display: none;position: fixed;width:100%; top:0;left:0;} .top.fixed{display: block} .nav { line-height: 44px; background-color: red; } .list { background-color: blue; height: 1200px; ; } .fixed{position: fixed;top: 0;left: 0;right: 0;} </style> </head> <body> <div class="top" id="nav_model">我是隐藏的导航栏</div> <div class="nav">我是显示的导航栏</div> <div class="list"> <div>我是列表内容1</div> <div>我是列表内容1</div> <div>我是列表内容1</div> <div>我是列表内容1</div> <div>我是列表内容1</div> <div>我是列表内容1</div> <div>我是列表内容1</div> </div> <script> //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if(document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if(document.body) { scrollTop = document.body.scrollTop; } return scrollTop; } //获取导航栏的dom节点 var nav_dom=document.getElementById("nav_model"); //监听滚动条 window.onscroll = function() { //判断滚动条大于30,导航栏吸顶 if(getScrollTop() > 50) { nav_dom.className = "top fixed"; } else { nav_dom.className = "top"; } } </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
- ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
- ¥15 手机接入宽带网线,如何释放宽带全部速度
- ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
- ¥15 ETLCloud 处理json多层级问题
- ¥15 matlab中使用gurobi时报错
- ¥15 这个主板怎么能扩出一两个sata口
- ¥15 不是,这到底错哪儿了😭
- ¥15 2020长安杯与连接网探
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么