使用offsetHeight添加CSS类（JavaScript）导致元素闪烁问题排查

问题场景 #

页面顶部包含向下滚动时隐藏的窄横幅（skinny banner）、滚动时固定在顶部的主导航（main-nav），下方是测试用占位内容。当前实现逻辑：当滚动位置scrollY大于等于main-nav的offsetHeight时，给窄横幅添加sb-scrolling类（设置display: none），同时给主导航添加scrolling类（缩小高度）。但缓慢滚动时，窄横幅会出现隐藏与显示反复切换的闪烁现象。

问题根源 #

闪烁的核心原因是主导航高度变化引发的循环触发：

1. 初始状态下主导航高度为140px，当scrollY >=140时，添加类让主导航高度变为70px
2. 主导航高度缩小后，页面内容会向上偏移70px，导致scrollY的相对值“变小”，此时scrollY <140，触发移除类的逻辑
3. 主导航恢复140px高度，页面内容向下偏移，scrollY再次满足>=140，重新添加类
4. 上述过程反复循环，就出现了闪烁现象

解决方案 #

方案1：固定判断阈值 + 区分滚动方向 #

保存主导航的初始高度作为判断阈值，避免动态高度变化干扰逻辑；同时区分滚动方向，减少不必要的类切换：

const skinnyBanner = document.querySelector('.skinny-banner');
const mainNav = document.querySelector('.main-nav');

// 保存初始高度，避免动态变化影响判断
const initialNavHeight = mainNav.offsetHeight;
const bannerHeight = skinnyBanner.offsetHeight;
let lastScrollPos = window.scrollY;

window.addEventListener('scroll', function() {
  const currentScrollPos = window.scrollY;
  const isScrollingDown = currentScrollPos > lastScrollPos;

  // 向下滚动：超过初始导航高度时隐藏横幅、缩小导航
  if (isScrollingDown && currentScrollPos >= initialNavHeight) {
    mainNav.classList.add('scrolling');
    skinnyBanner.classList.add('sb-scrolling');
  } 
  // 向上滚动：滚动到足够低的位置再恢复原状，避免频繁切换
  else if (!isScrollingDown && currentScrollPos <= initialNavHeight - bannerHeight) {
    mainNav.classList.remove('scrolling');
    skinnyBanner.classList.remove('sb-scrolling');
  }

  lastScrollPos = currentScrollPos;
});

方案2：优化CSS避免布局跳动 #

display: none会让元素直接脱离文档流，引发布局跳动，改用visibility: hidden结合高度收缩的方式，保留元素占位同时隐藏内容：

.sb-scrolling {
  visibility: hidden;
  height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

完整优化代码 #

HTML（无修改）

<header>
  <nav>
    <div class="skinny-banner">SKINNY BANNER THAT IS HIDDEN WHEN SCROLLING DOWN</div>
    <div class="main-nav">
    MAIN NAVIGATION THAT SHOULD ALWAYS BE VISIBLE
    </div>
  </nav>
</header>

<div class="content-block-1">RANDOM PAGE CONTENT</div>
<div class="content-block-2">RANDOM PAGE CONTENT</div>
<div class="content-block-3">RANDOM PAGE CONTENT</div>

CSS（添加过渡动画 + 修改隐藏逻辑）

header {
  display: block;
  position: sticky;
  top: 0;
}

.skinny-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightgrey;
  width: 100%;
  height: 40px;
  transition: all 0.2s ease; /* 添加过渡动画，让切换更平滑 */
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: yellow;
  width: 100%;
  height: 140px;
  transition: all 0.2s ease; /* 添加过渡动画 */
}

.skinny-nav-menu {
  display: flex;
  gap: 24px;
}

.sb-scrolling {
  visibility: hidden;
  height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

.scrolling {
  min-height: 70px !important;
}

.content-block-1 {
  height: 300px;
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-block-2 {
  height: 300px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-block-3 {
  height: 300px;
  background-color: lightcyan;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript（固定阈值 + 滚动方向判断）

const skinnyBanner = document.querySelector('.skinny-banner');
const mainNav = document.querySelector('.main-nav');

const initialNavHeight = mainNav.offsetHeight;
const bannerHeight = skinnyBanner.offsetHeight;
let lastScrollPos = window.scrollY;

window.addEventListener('scroll', function() {
  const currentScrollPos = window.scrollY;
  const isScrollingDown = currentScrollPos > lastScrollPos;

  if (isScrollingDown && currentScrollPos >= initialNavHeight) {
    mainNav.classList.add('scrolling');
    skinnyBanner.classList.add('sb-scrolling');
  } else if (!isScrollingDown && currentScrollPos <= initialNavHeight - bannerHeight) {
    mainNav.classList.remove('scrolling');
    skinnyBanner.classList.remove('sb-scrolling');
  }

  lastScrollPos = currentScrollPos;
});

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