2

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

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

4

3 回答 3

3

这是一个可以为您解决这个问题的 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 } );
});

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

于 2011-08-30T19:48:15.340 回答
0

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

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

有关更多详细信息,请参阅此 jsFiddle 示例

于 2011-08-25T17:16:16.660 回答
0

我用过jquery插件

 https://github.com/garand/sticky

停在底部:

 (function($) {

    var limit_bottom=$('#footer').height(); 
    $('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom});
   })(jQuery);
于 2013-11-25T11:17:31.733 回答