jQuery实现侧边栏随窗口滚动

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

方法一:

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

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

  1. <script type=>   
  2. $(() {
  3.         = $(),   
  4.             = $(window),   
  5.         offset     = .offset(),   
  6.         topPadding = 15;   
  7.   
  8.     .scroll(() {   
  9.          (.scrollTop() > offset.top) {   
  10.             .stop().animate({   
  11.                 marginTop: .scrollTop() – offset.top + topPadding   
  12.             });   
  13.         }  {   
  14.             .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 = () {  
  2.      position = (element) {  
  3.          top = element.position().top, pos = element.css();  
  4.         $(window).scroll(() {  
  5.              scrolls = $().scrollTop();  
  6.              (scrolls > top) {  
  7.                  (window.XMLHttpRequest) {  
  8.                     element.css({  
  9.                         position: ,  
  10.                         top: 0  
  11.                     });      
  12.                 }  {  
  13.                     element.css({  
  14.                         top: scrolls  
  15.                     });      
  16.                 }  
  17.             } {  
  18.                 element.css({  
  19.                     position: ,  
  20.                     top: top  
  21.                 });      
  22.             }  
  23.         });  
  24.     };  
  25.      $().each(() {  
  26.         position($());                           
  27.     });  
  28. };  
  29. $().smartFloat();  
    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞0 分享
    评论 抢沙发

    请登录后发表评论

      暂无评论内容