How to Detect When a Sticky Element Gets Pinned

将一个元素固定到其容器的顶部就像一个CSS指令一样简单：

.myElement {
  position: sticky;
}

关于如何检测被固定的元素，问题仍然存在。理想情况下，我们可以使用：卡住的CSS指令，但我们能做的最好的事情是，当元素变得粘稠时，使用CSS技巧和一些JavaScript魔法来应用CSS类：

.myElement {
  position: sticky;
  /* use "top" to provide threshold for hitting top of parent */
  top: -1px;
}

.is-pinned {
  color: red;
}

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

observer.observe(el);

一旦myElement被卡住或松开，就会被固定类就会被应用或移除。查看此演示：