如何将类添加到位置下的块：

Question

我有一个有位置的块:粘粘的，下面有块。有什么方法可以跟踪粘滞块贴在顶部并在底部块中添加类的时间吗？

​

​

我想我应该使用$(window).scroll()，但不知道如何使用。

Answer 1

没有一种“官方”的方式告诉一个元素被粘在粘性的位置上，正如我现在知道的。但你可以用IntersectionObserver。

它通过观察与视口相关的元素位置的变化来工作，在此代码示例中，它至少检查1 1px差(阈值: 1)。

const el = document.querySelector(".stickyElement")
const observer = new IntersectionObserver( 
  ([e]) => document.querySelector(".elementThatShouldUpdate").classList.toggle("desired-class", e.intersectionRatio < 1),
  { threshold: [1] }
);

observer.observe(el);

还应该更新粘性元素的CSS，以说明1px的差异：

top: -1px;

并且考虑到这个额外的偏移量，所以您应该在这个元素中添加一个边框或一个填充：

padding-top: 1px;

如果这有帮助的话请告诉我。