停止在页脚浮动粘性侧边栏 div（几乎可以工作）答案

【问题标题】：Stop floating sticky sidebar div at footer (almost working)停止在页脚浮动粘性侧边栏 div（几乎可以工作）
【发布时间】：2012-05-27 00:06:40
【问题描述】：

我想得到它，这样我侧边栏上的最后一个 div 在页面滚动时保持粘性，但在页脚处停止。我几乎可以使用online tutorial，但是当 disqus cmets 加载时计算会出错，并且只会到某个点。

这是一个工作版本http://jsfiddle.net/k56yR/1/，但是有没有一种简单的方法来做一些事情，比如计算页脚高度，然后告诉它停止滚动到离页面底部那么远的地方？

【问题讨论】：

标签： jquery sticky

【解决方案1】：

我认为您的问题是您的 $('#footer').offset().top 值在您的 disqus cmets 加载后发生了变化。因此，您需要在 cmets 加载后或每次触发事件时更新 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 可用。它还支持一个stopper值，将sticky box停在任何需要的位置。

【讨论】：

谢谢，它现在几乎可以工作了。以为是，但是对于不同的浏览器，它会忽略限制并滚动到页脚之外。当您清除缓存或刷新页面时似乎工作一次，然后对于每个重复视图都不起作用。有任何想法吗？这是网站thecomeupbmx.net/videos/red-bull-empire-of-dirt-practice-edit 上的一个示例（这不是我的，我只是在研究它）
我需要某种总是失败的测试用例。可能是浏览器缓存了旧的 js，但我无法重现。
这个 jQuery 插件 github.com/AndrewHenderson/jSticky（我在 Mike Jonas 提供的上一个示例的 cmets 中看到了它）正是我想要的。它支持一个停止值（可以是一个类、ID 甚至是一个数值）来将粘性框停止在任何所需的位置。