position:sticky搭配flex子元素闪烁，求position:fixed+JS实现方案

针对flex子元素导致Intersection Observer方案出现闪烁的问题，我们可以通过监听滚动位置来实现需求，保留原有HTML结构，用原生JS、CSS完成效果：

完整代码实现 #

HTML（保留原有结构） #

<header>
   <div class="skinny-banner">Skinny banner that on scroll down disapears.</div>
   <div class="sticky-nav">Sticky Header that on scroll down sticks to top and shrinks in height when stuck</div>
</header>

CSS（优化样式，避免布局偏移） #

body { 
 margin: 0;
 height: 200vh;  
}

.skinny-banner{
  background: lightblue;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.sticky-nav{
  position: fixed;
  top: 40px;
  width: 100%; /* 确保固定导航占满宽度 */
  background: salmon;
  padding: 1rem;
  transition: all .1s ease; /* 优化过渡效果 */
  box-sizing: border-box; /* 避免padding导致宽度溢出 */
}

/* 导航固定到顶部时的样式 */
.sticky-nav.isSticky{
  top: 0;
  height: 66px;
  padding: 0.5rem 1rem; /* 配合高度调整内边距，视觉上更协调 */
}

JavaScript（原生滚动监听+防抖优化） #

// 获取元素
const skinnyBanner = document.querySelector('.skinny-banner');
const stickyNav = document.querySelector('.sticky-nav');

// 计算触发阈值：窄横幅的高度
const bannerHeight = skinnyBanner.offsetHeight;

// 防抖函数，减少滚动事件触发频率
function debounce(func, delay = 10) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  }
}

// 处理滚动逻辑的函数
function handleScroll() {
  if (window.scrollY >= bannerHeight) {
    stickyNav.classList.add('isSticky');
  } else {
    stickyNav.classList.remove('isSticky');
  }
}

// 监听滚动事件，绑定防抖后的处理函数
window.addEventListener('scroll', debounce(handleScroll));

关键说明 #

1. 滚动阈值判断：通过skinnyBanner.offsetHeight获取窄横幅的实际高度，当滚动距离超过这个值时，说明窄横幅已完全移出视口，此时给导航添加.isSticky类，使其固定到顶部。
2. 防抖优化：滚动事件会频繁触发，用防抖函数限制处理逻辑的执行频率，避免不必要的性能消耗。
3. 样式细节：给.sticky-nav添加width:100%和box-sizing:border-box，确保固定导航不会出现宽度收缩或溢出的问题；调整过渡效果和内边距，让切换更自然。

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