IntersectionObserver的rootMargin在sticky元素上未生效问题

你对rootMargin参数的偏移方向理解完全相反：

• rootMargin的边距值为正数时，会将交叉检测的根边界向根元素（未手动指定root时默认是浏览器视口）的外侧扩展：top方向的正值会把判定上边界抬到视口顶部以上的不可见区域，扩大检测范围
• rootMargin的边距值为负数时，才会将根边界向根元素的内侧收缩：top方向的负值会把判定上边界压到视口内部靠下的位置，缩小检测范围

你当前设置rootMargin: '11px 0px 0px 0px'时，检测区域的上边界在视口顶部以上11px的位置。当sticky元素吸附在距离视口顶部10px的位置时，整个元素完全落在检测区域内部，intersectionRatio始终为1，自然不会触发预期的状态变更回调。
这也能解释为什么你把sticky的CSS属性改为top: -1px时逻辑能正常运行：此时元素吸附时顶部会伸到视口顶部以上1px的位置，部分区域跑出视口范围，intersectionRatio才会小于1。

将rootMargin的top值改为-11px即可，让检测边界向内收缩到视口顶部往下11px的位置，匹配sticky元素top:10px的吸附规则：

• 页面滚动过程中，sticky元素未触发吸附时，会随页面正常滚动，整体完全落在检测区域内，intersectionRatio为1，判定为未吸附状态
• 当sticky元素开始吸附、停在距离视口顶部10px的位置时，元素顶部在检测上边界（视口下11px处）的上方，有1px高度的区域落在检测范围外，intersectionRatio小于1，正确触发吸附状态判定。

修正后的JS代码如下：

const sticky = document.getElementsByClassName("sticky")[0];

const observer = new IntersectionObserver(
  ([e]) => {
    console.log(e.intersectionRatio)
    const stuck = e.intersectionRatio < 1.0;
    sticky.innerHTML  = "Sticky content (" + String(stuck) + ")"
  }, {
    threshold: [1],
    rootMargin: '-11px 0px 0px 0px',
  }
)

observer.observe(sticky)

对应的HTML和CSS代码不需要调整，保持原有写法即可正常运行。

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