Question

我收到了一段内容：

<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块附近停止。

有什么建议吗？

Answer 1

尝试使用底部块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
                            });
  }
});

jquery固定位置块，切换到静态某一点

1 个答案: