首页>>Jquery文字>>固定层不随鼠标滚动(2017-08-07)

固定层不随鼠标滚动

固定层不随鼠标滚动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="box">  
  2.     <!--代码开始-->  
  3.     <div class="main">拖动鼠标展示效果</div>  
  4.     <div class="sub">  
  5.         <div class="sub01"></div>  
  6.         <div class="sub01"></div>  
  7.         <div class="fixed">我是固定的哟freejs.net</div>         
  8.     </div>  
  9.     <!--代码结束-->  
  10. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function(e) {           
  3.     t = $('.fixed').offset().top;  
  4.     mh = $('.main').height();  
  5.     fh = $('.fixed').height();  
  6.     $(window).scroll(function(e){  
  7.         s = $(document).scrollTop();      
  8.         if(s > t - 10){  
  9.             $('.fixed').css('position','fixed');  
  10.             if(s + fh > mh){  
  11.                 $('.fixed').css('top',mh-s-fh+'px');      
  12.             }                 
  13.         }else{  
  14.             $('.fixed').css('position','');  
  15.         }  
  16.     })  
  17. });  
  18. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_631.html