粘性 Div 停止@底部答案

【问题标题】：Sticky Div stops @ bottom粘性 Div 停止@底部
【发布时间】：2011-11-03 21:00:12
【问题描述】：

我有一个粘性 div，但我需要它在底部的某个点停止。当然在示例中（下面的链接）它永远不会触底，但是如果我有一个宽度更大的 div，我希望它在它触到我的页脚之前停止。如果您不理解这个问题，请告诉我，帮助会很大。

http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

【问题讨论】：

什么函数正在调用你的#sticky 上的类更改？
我不明白这个问题。您希望粘性 div 在遇到宽度更大的 div 时停止滚动，或者......什么？
@Toukakoukan 将页面大小调整为 100px 高，您会看到海报的含义
我希望它被修复，但由于我有一个大 div，它超出了我的页脚。相反，我希望#sticky div 停在底部的某个点上，这样它就不会悬停在我的页脚上。在链接中的示例中，它在到达
时开始滚动，并在到达同一个 div 时停止。不过，我需要这样的效果。
检查这个插件：stackoverflow.com/a/8298172/104380

【解决方案1】：

这里有一个 jquery 插件可以为你解决这个问题。正如您在示例中所做的那样，此插件会将元素固定到页面顶部；并且，如果您将可选限制设置为要停止的元素的顶部，它应该在页面滚动时向上移动。您必须将“固定”元素的高度添加到限制，以使其在接触您不希望它接触的元素之前再次向上移动页面，如果需要，还可以加上一些边距。

这是一个演示这个的小提琴：http://jsfiddle.net/ZczEt/2/

这是插件及其来源：https://github.com/bigspotteddog/ScrollToFixed

// the limit is optional, but it will make the header move up the
// page again once it reaches the 7th paragraph
$(document).ready(function() {
    $('.header').scrollToFixed( { limit: $($('h2')[7]).offset().top } );
});

我忘了提一下，这个插件在修复后也会修复粘性标题下方内容中的问题。在您的示例中，如果您缓慢滚动，您会注意到内容在固定时会跳过标题的高度。这个插件弥补了这一点。

【讨论】：

【解决方案2】：

这与示例有点不同，但我认为这可以满足您的需求：

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_bottomEdge = window_top + $('#sticky').outerHeight();
    var avoid_top = $('#avoidMe').offset().top;
    if (div_bottomEdge < avoid_top) $('#sticky').css('top', window_top);
}

$(document).ready(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

See this jsFiddle Example for more details

【讨论】：

【解决方案3】：

我用过jquery插件

 https://github.com/garand/sticky

停在底部：

 (function($) {

    var limit_bottom=$('#footer').height(); 
    $('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom});
   })(jQuery);

【讨论】：