首页 > Wordpress > jQuery实现侧边栏随窗口滚动
2013
09-04

jQuery实现侧边栏随窗口滚动

近日帮人作主题要求弄个侧边栏某个模块随窗口一起滚动，可能其他童鞋也想给主题加上这个小功能，贴出来，供大家参考。

方法一：

很简单，前提是你的主题必须已加载了jQuery。

把下面代码加到主题头部header.php模版中即可：

  1. <script type=“text/javascript”>     
  2. $(function() {  
  3.     var $sidebar   = $(“#sidebar”),     
  4.         $window    = $(window),     
  5.         offset     = $sidebar.offset(),     
  6.         topPadding = 15;     
  7.     
  8.     $window.scroll(function() {     
  9.         if ($window.scrollTop() > offset.top) {     
  10.             $sidebar.stop().animate({     
  11.                 marginTop: $window.scrollTop() – offset.top + topPadding     
  12.             });     
  13.         } else {     
  14.             $sidebar.stop().animate({     
  15.                 marginTop: 0     
  16.             });     
  17.         }     
  18.     });     
  19.     
  20. });     
  21. </script>    

可根据不同的主题模版，自行修改一下其中的DIV标签#sidebar名称。此方法兼容所有浏览器。

演示效果

HotNews主题也可使用该功能，默认是整个侧边栏随窗口滚动，受主题布局功能限制，单独滚动某个模块效果不是很理想。

参考自：http://css-tricks.com/scrollfollow-sidebar/

方法二：

本人未试过，可以自行参阅：js页面滚动时层智能浮动定位实现

  1. $.fn.smartFloat = function() {    
  2.     var position = function(element) {    
  3.         var top = element.position().top, pos = element.css(“position”);    
  4.         $(window).scroll(function() {    
  5.             var scrolls = $(this).scrollTop();    
  6.             if (scrolls > top) {    
  7.                 if (window.XMLHttpRequest) {    
  8.                     element.css({    
  9.                         position: “fixed”,    
  10.                         top: 0    
  11.                     });        
  12.                 } else {    
  13.                     element.css({    
  14.                         top: scrolls    
  15.                     });        
  16.                 }    
  17.             }else {    
  18.                 element.css({    
  19.                     position: “absolute”,    
  20.                     top: top    
  21.                 });        
  22.             }    
  23.         });    
  24.     };    
  25.     return $(this).each(function() {    
  26.         position($(this));                             
  27.     });    
  28. };    
  29. $(“#float”).smartFloat();    
最后编辑：
作者：漱石
这个作者貌似有点懒，什么都没有留下。
站内专栏 站点 QQ交谈 腾讯微博 新浪微博
捐 赠如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！

您可能还会对这些文章感兴趣！

留下一个回复