js实现导航固定定位

                                                                               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>

 

posted @ 2018-12-15 19:41  Mahmud(مەھمۇد)  阅读(2429)  评论(0编辑  收藏  举报