最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享，上代码
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>
时间： 2024-10-13 02:58:21