如何让网站导航在滚动时悬浮固定位置

div触顶固定悬浮在浏览器顶部就是某个版块，当浏览器拉动到这个DIV的位置时就会自动悬浮固定在浏览器顶部。如下图：

下面学做网站论坛就来介绍一下如何实现div触顶固定悬浮在浏览器顶部效果。

方法/步骤

1. 在代码顶部</head>标签上方引入JQUERY；引入方法见：网页如何引入JQuery
2. 在需要触顶固定悬浮在浏览器顶部的DIV代码中添加一个ID代码

   
   id="pordAttr"
   
   

3. 在代码底部</body>标签上面添加以下的JS代码，实现DIV触顶固定悬浮在浏览器顶部。

   
   <script type="text/javascript"> 
   
   $(function () { 
   
   var elm = $('#pordAttr'); 
   
   var startPos = $(elm).offset().top; 
   
   $.event.add(window, "scroll", function () { 
   
   var p = $(window).scrollTop(); 
   
   $(elm).css('position', ((p) > startPos) ? 'fixed' : 'static'); 
   
   $(elm).css('top', ((p) > startPos) ? '0px' : ''); 
   
   }); 
   
   }); 
   
   </script>
   
   

另外一种方法：

1. 在代码顶部</head>标签上方引入JQUERY；
2. 在style.css中添加以下的样式代码：

   
   div.sticky {
   
   position: fixed;
   
   width: 100%;
   
   background-color: #fff;
   
   z-index: 99;
   
   box-shadow: 0 1px 3px rgba(0, 0, 0, .11);
   
   top: 0;
   
   }
   
   

3. 在代码底部</body>标签上面添加以下的JS代码，实现DIV触顶固定悬浮在浏览器顶部。btm-header为导航的class名。

   
   <script type="text/javascript"> 
   
   $(window).scroll(function(){
   
   var scroH = $(this).scrollTop();
   
   if(scroH>=50){
   
   $(".btm-header").addClass('sticky');
   
   }else if(scroH<50){
   
   $(".btm-header").removeClass('sticky');
   
   }
   
   })
   
   </script>