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. $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/

方法二:

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

 

jQuery实现侧边栏随窗口滚动》上有1条评论

  1. 刘双双

    <script>
    /* <![CDATA[ */
    (new SidebarFollow()).init({
    element: jQuery(‘#sidebar),
    distanceToTop: 15
    });
    /* ]]> */
    </script>
    如果这样写就不会有滑动,博主觉得这样有什么弊端?

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注