jQuery实现侧边栏随窗口滚动,WordPress主题侧边栏随窗口滚动

  • A+

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

方法一:

很简单,前提是你的主题必须已加载了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.     $window.scroll(function() {
  8.         if ($window.scrollTop() > offset.top) {
  9.             $sidebar.stop().animate({
  10.                 marginTop: $window.scrollTop() - offset.top + topPadding
  11.             });
  12.         } else {
  13.             $sidebar.stop().animate({
  14.                 marginTop: 0
  15.             });
  16.         }
  17.     });
  18. });
  19. </script>

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

演示效果

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

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


WordPress主题侧边栏随窗口滚动,貌似这个特效目前很流行,上面的内容是《jQuery实现侧边栏随窗口滚动》的教程,不过有童鞋发现加上这个JS特效后,侧边栏会顶着页脚无限滚下去,那就再发一个比较完美的,上代码:

  1. <script type="text/javascript">
  2. var documentHeight = 0;
  3. var topPadding = 15;
  4. $(function() {
  5.     var offset = $("#sidebar").offset();
  6.     documentHeight = $(document).height();
  7.     $(window).scroll(function() {
  8.         var sideBarHeight = $("#sidebar").height();
  9.         if ($(window).scrollTop() > offset.top) {
  10.             var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
  11.             var maxPosition = documentHeight - (sideBarHeight + 368);
  12.             if (newPosition > maxPosition) {
  13.                 newPosition = maxPosition;
  14.             }
  15.             $("#sidebar").stop().animate({
  16.                 marginTop: newPosition
  17.             });
  18.         } else {
  19.             $("#sidebar").stop().animate({
  20.                 marginTop: 0
  21.             });
  22.         };
  23.     });
  24. });
  25. </script>

将上述javascript代码加到主题头部header.php模版中。

修改其中的“#sidebar”为你的主题侧边选择器名称(id);例如:#categories-2,categories-2为ID。

根据不同的主题头部模版高度,适当调整其中的数字“368”(默认数字为HotNews主题的)。

个人认为,网页加上这个特效后,侧边模块在眼前晃晃悠悠的,并不是很舒服,适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱,大家接着折腾吧。

发表评论

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

目前评论:1   其中:访客  1   博主  0

    • avatar InBi 1

      写的很好,让我学习到了!
      希望主人多写一些技术类的文档。