视口存在多个sticky元素时，如何检测元素是否固定？

问题根源 #

你提到的CSS-Tricks方案（设置top:-1px并监听元素是否离开视口）在单sticky场景下有效，但当页面上方存在其他sticky元素时，目标元素会被上方的sticky元素遮挡，实际并未离开视口，导致IntersectionObserver无法触发状态变更。

基于容器的IntersectionObserver解决方案 #

这个方案通过给每个sticky元素绑定专属的占位容器，利用元素与容器的相交状态变化来判断固定状态，完全不受其他sticky元素的干扰。

实现步骤 #

1. 构建HTML结构
   给每个sticky元素外层添加一个容器，容器的作用是占位，避免sticky元素固定后页面布局跳动：

<div class="sticky-wrapper">
  <header class="sticky-header">顶部导航</header>
</div>
<div class="sticky-wrapper">
  <div class="sticky-filter">筛选栏</div>
</div>

2. 配置基础CSS
   容器保持静态定位，高度与内部sticky元素一致；sticky元素根据上方sticky的高度设置对应的top值（比如第一个sticky设top:0，第二个设top:50px，对应第一个sticky的高度）：

.sticky-wrapper {
  height: 50px; /* 与内部sticky元素高度匹配 */
}
.sticky-header {
  position: sticky;
  top: 0;
  height: 50px;
  background: #2c3e50;
  color: white;
}
.sticky-filter {
  position: sticky;
  top: 50px; /* 对应上方sticky-header的高度 */
  height: 50px;
  background: #ecf0f1;
}

3. 编写IntersectionObserver逻辑
   以sticky元素的父容器为根节点，监听元素是否与容器顶部相交。当sticky元素进入固定状态时，它会脱离文档流，不再与容器顶部相交，此时即可判定状态变更：

document.querySelectorAll('.sticky-header, .sticky-filter').forEach(stickyEl => {
  const wrapper = stickyEl.parentElement;
  const observer = new IntersectionObserver(
    ([entry]) => {
      const isPinned = !entry.isIntersecting;
      // 切换样式或触发业务逻辑
      stickyEl.classList.toggle('pinned', isPinned);
      console.log(`${stickyEl.tagName} 固定状态：${isPinned}`);
    },
    {
      root: wrapper,
      // 只检测容器顶部的相交区域，rootMargin设为0 0 -100% 0表示只关注容器顶部的1px范围
      rootMargin: '0px 0px -100% 0px',
      threshold: 0
    }
  );
  observer.observe(stickyEl);
});

核心原理 #

• 当sticky元素处于正常文档流时，它与父容器顶部完全相交，isIntersecting为true。
• 页面滚动到sticky元素开始固定时，sticky元素会停留在视口的指定top位置，而父容器继续随页面滚动，此时sticky元素不再与容器顶部相交，isIntersecting变为false，以此精准判断固定状态。
• 每个sticky元素的检测独立基于自身的父容器，完全不受其他sticky元素的遮挡影响。

适配动态高度场景 #

如果sticky元素高度不固定，可以通过JS动态设置容器高度：

document.querySelectorAll('.sticky-header, .sticky-filter').forEach(el => {
  const wrapper = el.parentElement;
  wrapper.style.height = `${el.offsetHeight}px`;
  // 后续的Observer逻辑...
});

内容的提问来源于stack exchange，提问作者Toni Michel Caubet