在页脚处停止浮动粘性侧边栏div(几乎可以正常工作) [英] Stop floating sticky sidebar div at footer (almost working)

问题描述

我想获取它，以便页面滚动时，侧边栏上的最后一个div保持粘性，但停在页脚.我几乎可以与在线教程一起使用，但是当Disqus注释加载时，计算混乱了，它只会到某一点.

I want to get it so the last div on my sidebar stays sticky when the page scrolls, but stops at the footer. I have it almost working with an online tutorial, but the calculation messes up when disqus comments load and it only goes to a certain point.

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

Here's a working version http://jsfiddle.net/k56yR/1/, but Is there an easy way to do something like calculate the footer height and then tell it to stop scrolling that far from the bottom of the page?

推荐答案

我认为您的问题是您的Disc注释加载后，您的$('#footer').offset().top值发生了变化.因此，在注释加载后或每次事件触发时，您都需要更新footerTop(和基于新的footerTop值的limit).

I think your problem is that your $('#footer').offset().top value changes after your disqus comments load. So you need to update footerTop (and limit based on the new footerTop value) after your comments load or every time your event fires.

类似:

$(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 在他的评论中指出，在此处中可用.它还支持一个塞子值，可将粘滞盒停在任何所需的位置.

As with most of the cases, there is a jQuery plugin for this, as julianm pointed out in his comment, available here. It also supports a stopper value, to stop the sticky box at any desired position.

这篇关于在页脚处停止浮动粘性侧边栏div(几乎可以正常工作)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！