停止在页脚上浮动粘性侧边栏div(几乎正常工作)

时间:2012-05-19 22:04:15

标签: jquery sticky

我想得到它所以当我的侧边栏上的最后一个div在页面滚动时保持粘性,但在页脚停止。我几乎使用了online tutorial,但是当disqus注释加载时计算会变得混乱,而且它只会到达某一点。

这是一个工作版本http://jsfiddle.net/k56yR/1/,但有没有一种简单的方法可以做一些事情,比如计算页脚高度,然后告诉它停止滚动远离页面底部的内容?

1 个答案:

答案 0 :(得分:16)

我认为你的问题是你的disqus评论加载后你的$('#footer').offset().top值会发生变化。因此,您需要在评论加载后或每次事件触发时更新footerTop(以及基于新limit值的footerTop)。

类似的东西:

$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
          }
          else {
             el.css('position','static');
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});

与大多数情况一样,有一个jQuery插件,正如julianm在他的评论中指出的那样,可用here。它还支持一个塞子值,以便在任何所需位置停止粘盒。