热门关键字：
jquery > jquery教程 > 插件详解 > Jquery实现页面滚动时层智能浮动定位插件

Jquery实现页面滚动时层智能浮动定位插件

6262
作者：管理员
发布时间：2012/7/25 1:51:22
评论数：3
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=21
Jquery实现页面滚动时层智能浮动定位插件可以智能判断当滚动高度值大于顶部值就自动设置position: "fixed"，top=0,这样层就一直处于顶部位置，反之刚设置回层原来的值，效果如下：
初始情况效果如下：
滚动高度值在于顶部值的情况如下：
 
主要代码如下：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>jQuery实现页面滚动时层智能浮动定位</title>  
  6. <style type="text/css">    
  7. *{ margin:0; padding:0;}   
  8. body { font:12px/1.8 Arial; color:#666; height:2000px;}   
  9. .float{width:200px; height:200px; border:1px solid #ffecb0; background-color:#000;position:absolute; right:10px; top:150px;}   
  10. </style>    
  11. <script type="text/javascript" src="jquery.min.js"></script>  
  12. </head>  
  13. <body>  
  14. <div class="float" id="float"></div>  
  15. <script type="text/javascript">  
  16. $.fn.smartFloat = function() {   
  17.     var position = function(element) {   
  18.         var top = element.position().top, pos = element.css("position");   
  19.         $(window).scroll(function() {   
  20.             var scrolls = $(this).scrollTop();   
  21.             if (scrolls > top) {   
  22.                 if (window.XMLHttpRequest) {   
  23.                     element.css({   
  24.                         position: "fixed",   
  25.                         top: 0   
  26.                     });    
  27.                 } else {   
  28.                     element.css({   
  29.                         top: scrolls   
  30.                     });    
  31.                 }   
  32.             }else {   
  33.                 element.css({   
  34.                     position: pos,   
  35.                     top: top   
  36.                 });    
  37.             }   
  38.         });   
  39. };   
  40.     return $(this).each(function() {   
  41.         position($(this));                          
  42.     });   
  43. };   
  44. //绑定   
  45. $("#float").smartFloat();   
  46. </script>       
  47. </div>  
  48. </body>    
  49. </html>  

打包下载





如果您觉得本文的内容对您的学习有所帮助：支付鼓励



关键字：centos7安装jdk1.7
友荐云推荐