jQuery实现WordPress侧边栏随窗口滚动 – WordPress 教程

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

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

方法一：

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

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

<script type="text/javascript">   $(function() {    var $sidebar   = $("#sidebar"),           $window    = $(window),           offset     = $sidebar.offset(),           topPadding = 15;       $window.scroll(function() {           if ($window.scrollTop() > offset.top) {               $sidebar.stop().animate({                   marginTop: $window.scrollTop() - offset.top + topPadding               });           } else {               $sidebar.stop().animate({                   marginTop: 0               });           }       });   });   </script>  

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

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

方法二：

本人未试过

$.fn.smartFloat = function() {      var position = function(element) {          var top = element.position().top, pos = element.css("position");          $(window).scroll(function() {              var scrolls = $(this).scrollTop();              if (scrolls > top) {                  if (window.XMLHttpRequest) {                      element.css({                          position: "fixed",                          top: 0                      });                      } else {                      element.css({                          top: scrolls                      });                      }              }else {                  element.css({                      position: "absolute",                      top: top                  });                  }          });      };      return $(this).each(function() {          position($(this));                               });  };  $("#float").smartFloat();