我得到了一个内容块:
<div id="content_holder">
<div id="fixed_content"></div>
<div id="bottom_content"></div>
</div>
我想实现这一目标-当我用鼠标向下滚动时,
fixed_content
块将变成固定位置,并停留在页面顶部,直到我向下滚动到bottom_content
。到目前为止,我得到了:
var top_positio_saver = $('#fixed_content').offset().top;
$(document).on('scroll', function() {
if ($('#fixed_content').offset().top < $(document).scrollTop()) {
$('#fixed_content').css('position', 'fixed');
$('#fixed_content').css('top', 0);
}
if ($(document).scrollTop() < top_positio_saver) {
$('#fixed_content').css('position', 'static');
$('#fixed_content').css('top', 0);
$('#fixed_content').css('margin-top', 0);
}
});
使用此代码,一旦我向下滚动足够大,就固定了
fixed_content
块,而当我向上滚动足够时,该块又恢复为静态。这里的问题是,如果我向下滚动太多,则此块位于bottom_content
块的顶部,而我希望它停止在bottom_content块附近。有什么建议么?
最佳答案
尝试使用底部块的offset.top()
与当前文档的scrollTop()
之间的距离。
以下代码应该起作用。请注意,您可以使用相同的.css()调用来设置多个设置。还要注意,第二个if
条件是多余的,可以用else
条件代替。
逻辑是,如果scrollTop
已达到550px,但底部内容从500px开始,则#fixed_content
元素将从top: -50px
开始。这样我们就可以防止溢出。
var top_positio_saver = $('#fixed_content').offset().top;
$(document).on('scroll', function() {
if (top_positio_saver <= $(document).scrollTop()) {
var distance = $('#bottom_content').offset().top - $(document).scrollTop();
var newTop = Math.min(0, distance);
$('#fixed_content').css({
'position': 'fixed',
'top': newTop
});
}
else {
$('#fixed_content').css({
'position': 'static',
'top': 0,
'margin-top': 0
});
}
});