在某个 div 或某个位置停止固定位置答案

【问题标题】：Stop fixed position at certain div or certain position在某个 div 或某个位置停止固定位置
【发布时间】：2018-01-01 20:28:08
【问题描述】：

我需要停止一个 div 在它接触另一个元素之前在滚动上获得固定位置，基本上让它回到某个位置的绝对位置，这应该适用于任何尺寸的屏幕。我有一个带有代码的 jsfiddle，有两个元素，如果您知道答案，请查看示例并提供帮助，谢谢！

var navTop = $('#nav').offset().top;
var lastMode = "absolute";

$(window).scroll(function(){
var mode;
if ($(this).scrollTop() >= navTop) {
    mode = 'fixed';
} else {
    mode = 'absolute';
}

if(lastMode !== mode) {
    if (mode == 'fixed') {
        $('#nav').css('position', 'fixed');
        $('#nav').css('top', '0');
    } else {
        $('#nav').css('position', 'absolute');
        $('#nav').css('top', navTop);
    }
    lastMode = mode;
}
});

https://jsfiddle.net/Zygimantas10/vro3LLu9/

如果不清楚，请告诉我。

【问题讨论】：

标签： javascript jquery scroll offset

【解决方案1】：

像这样？

var navTop = $('#nav').offset().top;
var navStop = $('#stop').offset().top;
var lastMode = "absolute";

$(window).scroll(function() {
  var mode;
  if ($(this).scrollTop() >= navTop) {
    if ($(this).scrollTop() - navStop + $('#nav').height() > 0)
      mode = 'absolute';
    else
      mode = 'fixed';
  } else {
    mode = 'absolute';
  }

  if (lastMode !== mode) {
    if (mode == 'fixed') {
      $('#nav').css('position', 'fixed');
      $('#nav').css('top', '0');
    } else {
      $('#nav').css('position', 'absolute');
      $('#nav').css('top', navTop);
    }
    lastMode = mode;
  }
});

#nav {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 200px;
  width: 100px;
  height: 50px;
}

#stop {
  width: 100%;
  background: blue;
  height: 300px;
  position: absolute;
  top: 900px;
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="height:5000px;">
  <div id="nav"></div>
  <div id="stop"></div>
</body>

【讨论】：

已编辑，忘记添加 JQuery 库
是的，我错过了，这就是我删除评论的原因:) 感谢您的帮助，我把它解决了