Javascript 到达某个元素时停止的粘性元素

当我滚动到另一个元素的顶部时，我想制作一个固定的元素（比如sticky）。固定元素将增加css的底部属性，使其不通过我设置为绑定的元素的顶部（该元素不能通过点，如地面）。我做了一支笔，显示了我想要的，希望有帮助：。我真的不知道我需要做什么计算才能达到这个目标。请帮帮我

我尽我所能来举例说明这一点

*{
保证金：0；
填充：0；
}
部分{
高度：100vh；
宽度：100vw；
背景：#eee；
位置：相对位置；
最大宽度：100%；
}
.a{
背景：#美国联邦航空局；
}
.b{
背景：#ffa；
}
c{
背景：#afa；
}
博士{
背景：#aaf；
}
.粘的{
宽度：100%；
位置：固定；
高度：100px；
背景：蓝色；
不透明度：0.5；
底部：0；
z指数：1；
}
.场地{
高度：2000px；
背景：黑色；
}

我希望有一个固定的元素不通过地面元素。就这样。

更换

      if( delta > 0 ){
        $elem.css('bottom', delta);
      }
      else{
        $elem.removeAttr('style');
      }

与

将滤芯始终粘到底部。

更换

      if( delta > 0 ){
        $elem.css('bottom', delta);
      }
      else{
        $elem.removeAttr('style');
      }

与

---

将元素始终粘贴到底部。

我不确定我是否完全理解您想要的内容，但我认为您可以通过在页脚上使用

位置：sticky

的CSS来实现这一点

相关变化：

向具有粘性页脚的元素添加包装：

<div>
  <section class="a"></section>
  <section class="b"></section>
  <section class="c"></section>
  <section class="d"></section>
  <footer class="ground" id="ground">   </footer>
</div>

---

检查代码笔，因为很多CSS和（所有）JS都可以删除。

我不确定我是否完全理解您的需求，但我认为您可以使用页脚上的

位置：sticky

仅使用CSS来实现这一点

相关变化：

向具有粘性页脚的元素添加包装：

<div>
  <section class="a"></section>
  <section class="b"></section>
  <section class="c"></section>
  <section class="d"></section>
  <footer class="ground" id="ground">   </footer>
</div>

---

检查代码笔，因为很多CSS和（所有）JS都可以被删除。

我想要的是UIKit的功能：

---

但问题是UIKit使用的是top而不是bottom。

我想要的是UIKit的功能：

---

但问题是UIKit使用的是顶部而不是底部。

我终于找到了答案：

解决方案是将窗的高度添加到增量计算中：

const windowHeight = $(window).height();
const delta = (scrollTop - boundTop) + windowHeight;

---

感谢每一位对此帖子做出贡献的人

我终于找到了答案：

解决方案是将窗的高度添加到增量计算中：

const windowHeight = $(window).height();
const delta = (scrollTop - boundTop) + windowHeight;

---

感谢每一位对此帖子做出贡献的人

谢谢你的回复，但它不是强制性的元素总是有底部：0，我让它自由决定通过css。因此，我删除了内联样式标记。无论如何，这不会影响问题的解决。谢谢你的回复，但是元素总是有底部不是强制性的：0，我让它通过css自由决定。因此，我删除了内联样式标记。无论如何，这不会影响问题的解决。Sticky很棒，你确实做到了我想要的，但它并没有到达我想要的所有浏览器：。我想使用jQuery计算fixed元素的底部属性。无论如何谢谢你！对于支持

position:sticky

的浏览器，您可以使用此选项，如果浏览器不支持js回退，则可以使用js回退。如果你的js代码中有（！CSS.supports（'position'，'sticky'）{…}，那么它在支持它的浏览器上的性能会更好，你可以用它解决大部分问题（我想我添加了额外的div包装，因此sticky works也会帮助你进行计算）sticky很棒，您确实做到了我想要的，但它没有达到我想要的所有浏览器：。我想使用jQuery计算fixed元素的底部属性。无论如何谢谢你！对于支持

position:sticky

的浏览器，您可以使用此选项，如果浏览器不支持js回退，则可以使用js回退。如果你的js代码中有（！CSS.supports（'position'，'sticky'）{…}，那么它在支持它的浏览器上的性能会更好，你可以用它解决大部分问题（我想我添加的额外的div包装也会帮助你进行计算），这是什么想法？设置一些背景，像你过去的天空和挖掘地面？它可能是一个背景位置/附件，还是一个从地面附着的绝对伪元素，以便它随它一起滑动？要调整伪元素的大小，它可能是文档高度减去地面位置的差值，我猜？它不是背景，它是一个普通元素（它是一个底部为0的固定div），所以当它到达地面时，这个元素的位置（css的底部属性将增加，以防止元素通过地面元素，记住，它是一个固定元素）。想象一块石头落在地上（滚动是落下的运动，就像照相机一样），当石头（固定元素）到达地面时，它停止落下（图元仍然固定，但位置相对于地面发生变化），这是文档减去地面位置？给我一个工作的例子。想法是什么？设置一些背景以显示像你过去的天空和挖掘地面一样的内容？是背景位置/附件还是从地面附着的一个绝对伪元素，使其随地面滑动？要确定伪元素的大小，可能是不同的om我猜文档的高度减去地面的位置？它不是背景，它是一个普通元素（它是一个底部为0的固定div），所以当它到达地面时，这个元素的位置（css的底部属性将增加，以防止元素通过地面元素，记住，它是一个固定元素）.想象一块石头掉在地上（滚动是下落的运动，就像照相机一样），当石头（固定元素）到达地面时，它停止下落（元素仍然固定，但位置相对于地面发生变化），这是文档减去地面位置？给我一个工作示例。这应该是对你的问题的编辑，而不是作为答案发布。这应该是