如何让DIV悬浮在固定位置

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>
   
   

相关阅读：

Div 滚动到顶部固定（附代码）

如何将网站导航栏固定在顶部（jquery固定导航栏）