使用IntersectionObserver API实现sticky导航栏出现闪烁如何解决

问题根源 #

你当前的闪烁问题核心是监听对象选择错误：直接监听导航栏本身，当你给导航栏添加fixed定位后，导航栏会从原文档流脱离并固定到视口顶部，重新进入视口触发isIntersecting = true的回调，导致类名被移除，导航栏回到初始位置再次滚出视口，进入无限循环。

最优解决方案：纯CSS实现（无需JS） #

你的需求完全符合CSS position: sticky的定位逻辑，不需要写任何JS代码，性能是所有方案里最高的，也不会出现闪烁问题。
SCSS代码调整如下：

.nav {
  &__2 {
    position: sticky;
    top: 0; /* 滚动到顶部时的粘滞位置 */
    margin-top: 8rem; /* 替代原来的top:8rem，保证初始位置距离顶部8rem */
    left: 0;
    width: 100%;
  }
}

若需JS触发附加效果（如粘滞时改样式）：使用占位元素方案 #

如果你需要在导航栏粘滞时额外修改样式（加阴影、改背景等）必须依赖JS触发，可以新增一个固定在导航栏原始位置的占位元素，改为监听占位元素的相交状态，避免导航栏位置变化影响回调逻辑。

1. HTML调整 #

在导航栏前新增高度和导航栏完全一致的占位元素：

<!-- 占位元素，永久保留在导航栏原始位置 -->
<div class="nav__2-placeholder"></div>
<div class="nav__2">
  <div class="row nav__2--content">
    <div class="logo-container">
      <img src="img/logo-black.png" alt="" class="logo" />
    </div>
    <!-- 其余导航代码 -->
  </div>
</div>

2. SCSS调整 #

新增占位元素样式：

.nav {
  &__2 {
    top: 8rem;
    position: absolute;
    left: 0;
    width: 100%;

    &-sticky {
      position: fixed;
      top: 0;
    }
  }
  &__2-placeholder {
    /* 若导航栏高度动态，可在JS加载时获取导航栏offsetHeight动态赋值 */
    height: 6rem; /* 替换为你的导航栏实际高度 */
    width: 100%;
  }
}

3. JS调整 #

改为监听占位元素：

const navPlaceholder = document.querySelector('.nav__2-placeholder')
const navBar = document.querySelector('.nav__2')

const intersectionCB = ([entry]) => {
  if (!entry.isIntersecting) {
    navBar.classList.add('nav__2-sticky');
  } else {
    navBar.classList.remove('nav__2-sticky');
  }
};
const observer = new IntersectionObserver(intersectionCB, {
  root: null,
  threshold: 0
});
observer.observe(navPlaceholder);

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