js-滚动到指定位置导航栏固定顶部
Posted 一个奕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js-滚动到指定位置导航栏固定顶部相关的知识，希望对你有一定的参考价值。
最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享，上代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js滚动到指定位置导航栏固定顶部</title> 6 <style type="text/css"> 7 body{height: 2500px; margin: 0; padding: 0;} 8 .banner{height: 250px; width: 100%; background: #e5e5e5;} 9 .bignav{width: 100%; background: #000;} 10 .nav{ background:#000; width: 1200px; margin: 0 auto; height: 45px;} 11 .nav a{display: block; width: 200px;float: left; color: #fff; text-decoration: none; text-align: center; line-height: 45px;} 12 </style> 13 </head> 14 <body> 15 <div class="banner"> 16 17 </div> 18 <div class="bignav" id="bignav"> 19 <div class="nav"> 20 <a href="#">首页</a> 21 <a href="#">首页</a> 22 <a href="#">首页</a> 23 <a href="#">首页</a> 24 <a href="#">首页</a> 25 <a href="#">首页</a> 26 </div> 27 </div> 28 <p>其他内容</p> 29 <p>其他内容</p> 30 <p>其他内容</p> 31 <p>其他内容</p> 32 <p>其他内容</p> 33 <p>其他内容</p> 34 <p>其他内容</p> 35 <p>其他内容</p> 36 <p>其他内容</p> 37 <p>其他内容</p> 38 <p>其他内容</p> 39 <p>其他内容</p> 40 <p>其他内容</p> 41 <p>其他内容</p> 42 <p>其他内容</p> 43 <p>其他内容</p> 44 <p>其他内容</p> 45 <p>其他内容</p> 46 <p>其他内容</p> 47 <p>其他内容</p> 48 <p>其他内容</p> 49 <p>其他内容</p> 50 <p>其他内容</p> 51 <p>其他内容</p> 52 <p>其他内容</p> 53 <p>其他内容</p> 54 <p>其他内容</p> 55 <p>其他内容</p> 56 <p>其他内容</p> 57 <p>其他内容</p> 58 <p>其他内容</p> 59 <p>其他内容</p> 60 <p>其他内容</p> 61 <p>其他内容</p> 62 <p>其他内容</p> 63 <p>其他内容</p> 64 <p>其他内容</p> 65 <p>其他内容</p> 66 <p>其他内容</p> 67 <p>其他内容</p> 68 <p>其他内容</p> 69 <p>其他内容</p> 70 <p>其他内容</p> 71 <p>其他内容</p> 72 <p>其他内容</p> 73 <p>其他内容</p> 74 <p>其他内容</p> 75 <p>其他内容</p> 76 77 <script type="text/javascript"> 78 window.onscroll=function(){ 79 var topScroll =document.body.scrollTop;//滚动的距离,距离顶部的距离 80 var bignav = document.getElementById("bignav");//获取到导航栏id 81 if(topScroll > 250){ //当滚动距离大于250px时执行下面的东西 82 bignav.style.position = ‘fixed‘; 83 bignav.style.top = ‘0‘; 84 bignav.style.zIndex = ‘9999‘; 85 }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状 86 bignav.style.position = ‘static‘; 87 } 88 } 89 </script> 90 </body> 91 </html>
以上是关于js-滚动到指定位置导航栏固定顶部的主要内容，如果未能解决你的问题，请参考以下文章