Bootstrap 4双固定导航栏滚动收缩间隙问题及解决方案咨询

嘿，这个问题我太熟了——两个固定导航栏滚动时的间隙问题，本质就是第二个导航栏的top值没跟上第一个导航栏的高度变化嘛。你之前用的那种检测元素变化的方案确实有点激进，咱们换个更优雅、更可靠的路子来解决：

方案1：用原生ResizeObserver实时同步高度 #

现代浏览器提供了ResizeObserver API，专门用来监听元素尺寸变化，比第三方检测库高效得多，还不用额外依赖。直接用它来同步第一个导航栏的高度到第二个的top值：

// 获取两个导航栏DOM元素
const firstNav = document.querySelector('.first-fixed-nav');
const secondNav = document.querySelector('.second-fixed-nav');

// 创建观察者实例，监听第一个导航栏的尺寸变化
const navHeightObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    // 实时更新第二个导航栏的top值为第一个的当前高度
    secondNav.style.top = `${entry.contentRect.height}px`;
  });
});

// 启动监听
navHeightObserver.observe(firstNav);

这个方案的好处是：不管第一个导航栏是因为移除内边距类、内容变化还是其他原因导致高度改变，ResizeObserver都能精准捕捉到，瞬间同步第二个导航栏的位置，完全不会出现间隙。

方案2：结合CSS变量+滚动节流（适合高度可预知的场景） #

如果第一个导航栏的初始高度和收缩后高度是固定值，可以用CSS变量来绑定，再配合节流的滚动事件优化性能：

第一步：CSS设置变量和过渡 #

/* 第一个导航栏 */
.first-fixed-nav {
  --nav-height: 80px; /* 初始高度 */
  height: var(--nav-height);
  transition: height 0.3s ease; /* 加个过渡动画更顺滑 */
}
/* 滚动后移除内边距的类，同时更新变量 */
.first-fixed-nav.no-extra-padding {
  --nav-height: 50px; /* 收缩后的高度 */
}

/* 第二个导航栏直接用变量做top值 */
.second-fixed-nav {
  top: var(--nav-height);
  transition: top 0.3s ease; /* 同步过渡动画 */
}

第二步：节流滚动事件切换类 #

滚动事件触发非常频繁，用节流函数减少触发次数，避免性能损耗：

// 节流工具函数
function throttle(func, delay = 100) {
  let isThrottling = false;
  return function(...args) {
    if (!isThrottling) {
      func.apply(this, args);
      isThrottling = true;
      setTimeout(() => isThrottling = false, delay);
    }
  };
}

// 监听滚动，切换类
window.addEventListener('scroll', throttle(() => {
  const scrollThreshold = 100; // 滚动超过这个距离触发收缩
  if (window.scrollY > scrollThreshold) {
    firstNav.classList.add('no-extra-padding');
  } else {
    firstNav.classList.remove('no-extra-padding');
  }
}));

总结 #

如果第一个导航栏的高度是动态变化的（比如里面有自适应内容），优先选ResizeObserver方案；如果高度是固定的，CSS变量+节流的方案更简洁。两种方案都比你之前的激进检测方法更稳定、更符合现代前端实践。

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