Sticky Div停止@ bottom

Question

我有一个粘性的div，但我需要它在靠近底部的某个点上停止。当然，在示例中(链接如下)，它永远不会触底，但如果我有一个宽度更大的div，我希望它在命中我的页脚之前停止。如果你不理解这个问题，请告诉我，如果你有帮助，那就太好了。

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

Answer 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 } );
});

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

Answer 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

Answer 3

我使用过jquery插件

 https://github.com/garand/sticky

要在底部停止：

 (function($) {

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