jQuery实现侧边栏随窗口滚动

知更鸟
1482
文章
6919
评论
2012年2月7日12:09:32 76 22.9K 1756字阅读5分51秒
摘要

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

方法很简单,前提是你的主题必须已加载了jQuery。把下面代码加到主题头部header.php模版中即可,根据不同的主题模版,自行修改一下其中的DIV标签#sidebar名称。

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

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

方法一:

很简单,前提是你的主题必须已加载了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();  

 

继续阅读
weinxin
关于本站
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
WordPress 5.3 正式版下载 WordPress

WordPress 5.3 正式版下载

WordPress 5.3 正式版于北京时间2019年11月13日 发布,更新后第一个印像就是后台UI样式有所变动,原来非常协调的按钮样式,变得有些突兀,如图: 白背景灰边框的按钮变成蓝色,同时所有表...
为WordPress主题添加文章字数和阅读时间 WordPress

为WordPress主题添加文章字数和阅读时间

显示文章字数和阅读时间,这功能有什么用呢,我也不知道,不过有用户说人家有我们能不能也加一个,那就加呗,就有这篇为WordPress主题添加文章字数和阅读时间。 为WordPress主题添加文章字数和阅...
WordPress 5.2.4 安全更新发布 WordPress

WordPress 5.2.4 安全更新发布

WordPress 5.2.4 安全更新发布,这次更新重点就是修补之前的安全漏洞,非常有必要更新。 有些用户可能认为WordPress更新过于频繁,原因很简单,WP用户众多,也是黑客重点“帮扶”对像,...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:76   其中:访客  61   博主  5
    • 内涵图 内涵图 @回复 0

      方法不错 实验下

      • doghap doghap @回复 1

        我用了这一段代码,但是有个问题: 页面滑倒页脚时还是能滑动,我想侧边栏到页脚的元素那里就停止滑动的,这个能解决吗??

          • hbbb hbbb @回复 0

            @doghap 同问。。。。

          • 围挡 围挡 @回复 4

            两个都反复试了,怎么我的实现不了的啊。

            • 番茄 番茄 @回复 2

              你的点赞的效果不错,有这代码或者插件吗?