使用IntersectionObserver时Sticky DIV添加drop-shadow出现闪烁问题

问题根源 #

filter: drop-shadow会将元素的阴影视为其视觉边界的一部分，当sticky元素固定到视口顶部时，阴影的出现会改变IntersectionObserver检测的交叉区域，导致intersectionRatio频繁在1和小于1之间切换，触发class反复添加/移除，最终产生闪烁。而box-shadow基于盒模型，不会影响元素几何检测边界，但无法适配非矩形元素。

解决方案 #

方案1：用伪元素承载Drop-shadow #

把阴影效果放到sticky元素的伪元素上，伪元素完全覆盖原元素但不影响其几何检测边界，IntersectionObserver仅检测原元素状态，阴影不会干扰检测逻辑。

修改后的CSS代码：

#sticky {
  position: sticky;
  top: 0;
  background-color: khaki;
  position: relative; /* 让伪元素相对自身定位 */
  z-index: 1; /* 保证内容在阴影上方 */
}
.pinned::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: drop-shadow(0px 3px 3px red);
  pointer-events: none; /* 避免伪元素阻挡交互 */
  z-index: -1; /* 将阴影置于元素后方 */
}

/* 原有演示样式 */
body {
  min-height: 500vh;
}
div[data-placeholder="A"] {
  height: 20vh;
}

JS和HTML部分保持不变即可。

方案2：分离检测元素与视觉元素 #

创建一个不可见的占位元素作为IntersectionObserver的检测目标，实际带样式的sticky元素与它重叠。阴影仅作用于视觉元素，完全不会干扰检测逻辑。

修改后的完整代码：

HTML

<div data-placeholder="A"></div>
<!-- 不可见的检测占位元素 -->
<div id="sticky-detector"></div>
<!-- 实际的视觉sticky元素 -->
<div id="sticky">
  I am sticky
</div>

CSS

#sticky-detector {
  position: sticky;
  top: 0;
  height: var(--sticky-height); /* 与视觉元素高度一致 */
  visibility: hidden; /* 不可见但保留布局空间 */
}
#sticky {
  position: sticky;
  top: 0;
  background-color: khaki;
  margin-top: -var(--sticky-height); /* 与检测元素重叠 */
}
.pinned {
  filter: drop-shadow(0px 3px 3px red);
}

body {
  min-height: 500vh;
}
div[data-placeholder="A"] {
  height: 20vh;
}

JS

// 先获取视觉元素高度，设置CSS变量
const stickyEl = document.getElementById('sticky');
document.documentElement.style.setProperty('--sticky-height', stickyEl.offsetHeight + 'px');

const ob = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      // 给视觉元素切换class
      stickyEl.classList.toggle('pinned', entry.intersectionRatio < 1);
    }
  },
  {
    threshold: [1],
    rootMargin: '-1px 0px 0px 0px',
  },
);
// 观察不可见的检测元素
ob.observe(document.getElementById('sticky-detector'));

内容的提问来源于stack exchange，提问作者Somnium