Bootstrap 5双导航栏交互需求：主fixed-top导航栏推动次级导航栏

方案一：纯CSS（推荐，现代浏览器支持） #

利用position: sticky实现，它可以让元素相对于父容器固定，刚好匹配你的需求：

1. 给主导航保留固定定位，设置明确高度并提高层级：

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px; /* 按你的实际高度调整 */
  background: #fff;
  z-index: 100; /* 确保主导航在次级导航上方 */
}

2. 给Call To Action区域设置相对定位，让次级导航的sticky以它为参照容器：

.cta-section {
  position: relative;
  margin-top: 300px; /* 模拟上方内容高度，按实际布局调整 */
  min-height: 500px; /* 给区域足够高度，方便测试滚动效果 */
}

3. 给次级导航（scrollbar）设置sticky定位，top值设为主导航的高度，这样它会固定在主导航下方，且不会脱离Call To Action区域：

.scrollbar {
  position: sticky;
  top: 60px; /* 和主导航高度保持一致 */
  left: 0;
  right: 0;
  height: 50px; /* 按你的实际高度调整 */
  background: #f0f0f0;
  z-index: 90; /* 层级低于主导航 */
}

效果说明：

• 页面滚动时，主导航始终固定在顶部；
• 当次级导航滚动到主导航下方位置时，会固定在该位置；
• 当Call To Action区域滚动出视口时，次级导航会跟着一起离开，不会脱离所在区域。

方案二：JS+CSS兼容方案（适配旧浏览器） #

如果需要兼容不支持sticky的浏览器，可以用JS监听滚动事件动态切换定位：

1. 基础CSS：

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  z-index: 100;
}

.cta-section {
  position: relative;
  margin-top: 300px;
  min-height: 500px;
}

.scrollbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #f0f0f0;
  z-index: 90;
}

.scrollbar.fixed {
  position: fixed;
  top: 60px; /* 主导航高度 */
}

2. JS逻辑：

const mainNav = document.querySelector('.main-nav');
const scrollbar = document.querySelector('.scrollbar');
const ctaSection = document.querySelector('.cta-section');

const mainNavHeight = mainNav.offsetHeight;
const ctaTop = ctaSection.offsetTop;
const ctaBottom = ctaTop + ctaSection.offsetHeight;
const scrollbarHeight = scrollbar.offsetHeight;

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const visibleTop = scrollTop + mainNavHeight;

  // 当主导航底部碰到次级导航，且次级导航未超出Call To Action区域底部时，固定次级导航
  if (visibleTop >= ctaTop && visibleTop <= ctaBottom - scrollbarHeight) {
    scrollbar.classList.add('fixed');
  } else {
    scrollbar.classList.remove('fixed');
    // 回到对应位置：要么在区域顶部，要么在区域底部
    scrollbar.style.top = visibleTop < ctaTop ? '0' : `${ctaBottom - scrollbarHeight - ctaTop}px`;
  }
});

效果说明：

• 滚动时动态计算位置，次级导航会被主导航推动后固定在主导航下方，且始终处于Call To Action区域内，直到区域底部，再跟着滚动离开。

内容的提问来源于stack exchange，提问作者Mark-B-88