js实现导航固定定位
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>内容滚动事件</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 list-style: none;
13 }
14 html,body{
15 width: 100%;
16 }
17 .header{
18 height: 130px;
19 background: red;
20 font: 700 28px/130px serif;
21 color: aqua;
22 text-align: center;
23 }
24 .nav{
25 height: 60px;
26 width: 100%;
27 background: green;
28 font: 700 24px/60px serif;
29 color: rgb(240, 240, 14);
30 text-align: center;
31 }
32 ul{
33 display: inline-block;
34 }
35 li{
36 float: left;
37 margin-left: 60px;
38
39 }
40 .content1,
41 .content2,
42 .content3 {
43 height: 500px;
44 background: #DFFCB5;
45 font: 400 60px/800px serif;
46 color: #52524E;
47 text-align: center;
48 }
49 .content2 {
50 background: #FFE1B6;
51 }
52 .content3 {
53 background: #CDE3EB;
54 }
55 .fixed {
56 position: fixed;
57 top: 0;
58 left: 0;
59 }
60
61 </style>
62 </head>
63 <body>
64 <div class="header" id="header">
65 顶部广告栏
66 </div>
67 <div class="nav" id="nav">
68 <ul>
69 <li>主页</li>
70 <li>商城</li>
71 <li>产品展示</li>
72 <li>服务</li>
73 <li>关于我们</li>
74 </ul>
75 </div>
76 <div class="content1" id="con">
77 内容1
78 </div>
79 <div class="content2">
80 内容2
81 </div>
82 <div class="content3">
83 内容3
84 </div>
85 </body>
86 </html>
87 <script>
88 var header = document.getElementById(‘header‘);
89 var nav = document.getElementById(‘nav‘);
90 var content = document.getElementById(‘con‘);
91
92 // 封装一个scrollTop兼容性函数
93 function getScrollTop() {
94 return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
95 }
96
97 // 给页面注册滚动事件
98 window.onscroll = function() {
99 // 判断广告栏header 与 滚动的scrollTop的值
100 // 当scrollTop > header高度的时候 让导航栏 nav 固定定位
101 var scrollTop = getScrollTop();
102 if (scrollTop >= header.offsetHeight) {
103 // 样式中有的类名这里一定不要忘了加上去，否则就会被替换掉
104 nav.className = "nav fixed";
105 // 一旦标题栏设置了固定定位之后，就脱离标准流了，下面的内容就会顶上来，
106 // 所以要手动给下面的内容添加一个margin-top，将导航栏的位置留下来
107 content.style.marginTop = nav.offsetHeight + "px";
108 } else {
109 // 当scrollTop < header高度的时候 让导航栏 nav 恢复到原来的位置
110 // nav 取消固定定位，恢复到原来的位置，所以下面内容的margin-top也要去掉
111 nav.className = "nav"; // 去掉固定定位的样式，保留之前的样式
112 content.style.marginTop = 0;
113 }
114 };
115
116
117 </script>
原文地址：https://www.cnblogs.com/mahmud/p/10124408.html
时间： 2024-11-04 09:10:55