当元素处于交叉点边缘时，元素在屏幕上不停地跳跃（交叉点观察者）

Question

我有一个带有堆叠按钮的粘性页脚的页面，当页脚不完全位于视口上时，我隐藏其中一个按钮，当页脚就位时，我显示按钮，问题是当容器位于边缘时，因为那时它开始闪烁。

它会闪烁，因为当我们添加第二个按钮时（当它进入完全视口时）容器变得更大，并且因为它变得更大，它使得容器不再完全可见。

有办法绕过吗？我已在该问题中添加了 gif 和 codepen。

https://codepen.io/felipefernand3s/pen/OJGgMOK

我只想有一个带有堆叠按钮的页脚，页脚和其中一个按钮始终可见，但是当页脚被固定时（这意味着它位于正确的html位置而不是“浮动”，我想显示所有堆叠的按钮。

const el = document.querySelector(".myElement")
const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1) || console.log(e.intersectionRatio),
  { threshold: [0] }
);

observer.observe(el);

Answer 1

好吧，让它发挥作用的方法是在我们想要观察的元素之上添加一个元素。

https://codepen.io/felipefernand3s/pen/OJGgMOK

---

如果您想看到错误发生，只需将观察到的元素从

flag

更改为

el

- 然后向下滚动即可。