Javascript jquery固定位置块，切换到静态确定点

我得到了一块内容：

<div id="content_holder">
  <div id="fixed_content"></div>
  <div id="bottom_content"></div>
</div>

使用此代码，向下滚动足够多时，

fixed_content

块将被固定，向上滚动足够多时将返回静态。这里的问题是，如果向下滚动太多，该块将位于

bottom\u content

块的顶部，而我希望它停在bottom\u content块附近

---

有什么建议吗？

尝试使用底部块的

偏移量.top（）

和当前文档的

滚动顶（）

之间的距离

下面的代码应该可以工作。请注意，您可以在同一个通话中设置多个设置。还要注意第二个

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

var top_positio_saver=$（“#固定内容”）.offset（）.top；
$（文档）.on（'scroll'，function（）{
如果（顶部位置）
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
                            });
  }
});