7

我想得到它,所以当页面滚动时,我侧边栏上的最后一个 div 保持粘性,但在页脚处停止。我几乎可以使用在线教程,但是当 disqus 评论加载时计算会混乱,并且只会到某个点。

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

4

1 回答 1

17

我认为您的问题是$('#footer').offset().top您的 disqus 评论加载后您的价值会发生变化。所以你需要更新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});
          }
        });
   }
});

与大多数情况一样,正如julianm在他的评论中指出的那样,有一个 jQuery 插件,可在此处获得。它还支持停止值,以将粘性框停止在任何所需的位置。

于 2012-05-19T22:13:50.397 回答