如何用jQuery和Bootstrap 5在滚动到特定区域时添加第二个粘性导航栏

核心思路是通过监听页面滚动事件，判断当前滚动位置是否处于第二个区块范围内，动态给tab导航添加/移除固定定位样式，同时处理页面滚动时的布局跳动问题。

1. HTML结构示例 #

先搭建基础页面结构，包含固定顶部导航、三个区块，第二个区块内嵌入tab导航：

<!-- 固定顶部导航 -->
<nav class="fixed-top navbar">
  顶部导航栏
</nav>

<!-- 区块1 -->
<section class="section section-1">
  区块1内容
</section>

<!-- 区块2（包含tab导航） -->
<section class="section section-2">
  <!-- tab导航容器 -->
  <div class="tab-nav-container">
    <ul class="nav nav-tabs">
      <li class="nav-item"><a class="nav-link active" href="#tab1">标签1</a></li>
      <li class="nav-item"><a class="nav-link" href="#tab2">标签2</a></li>
      <li class="nav-item"><a class="nav-link" href="#tab3">标签3</a></li>
    </ul>
  </div>
  <!-- tab内容 -->
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">标签1内容</div>
    <div class="tab-pane" id="tab2">标签2内容</div>
    <div class="tab-pane" id="tab3">标签3内容</div>
  </div>
</section>

<!-- 区块3 -->
<section class="section section-3">
  区块3内容
</section>

2. CSS样式设置 #

• 给固定顶部导航设置明确高度，方便后续计算tab导航的固定位置
• 默认tab导航保持在区块内，添加sticky类时切换为固定定位，同时通过伪元素填充原位置避免页面跳动：

/* 固定顶部导航 */
.navbar {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* 通用区块样式 */
.section {
  min-height: 100vh;
  padding: 20px;
}

.section-1 { background: #f5f5f5; }
.section-2 { background: #fff; }
.section-3 { background: #f5f5f5; }

/* tab导航容器默认样式 */
.tab-nav-container {
  position: relative;
  margin-bottom: 20px;
}

/* 固定定位的tab导航样式 */
.tab-nav-container.sticky {
  position: fixed;
  top: 60px; /* 与顶部导航高度一致，保证在其下方 */
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  z-index: 99;
}

/* 占位元素：填充tab导航脱离文档流后的空白，防止页面跳动 */
.tab-nav-container.sticky::before {
  content: '';
  display: block;
  height: 48px; /* 等于tab导航的实际高度 */
}

/* tab导航本身的样式 */
.nav-tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  height: 48px;
  align-items: center;
}

.nav-link {
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

.nav-link.active {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

3. JavaScript逻辑实现 #

监听scroll事件，计算滚动位置与第二个区块的边界关系，动态切换tab导航的固定状态：

// 获取DOM元素
const navbar = document.querySelector('.navbar');
const tabNavContainer = document.querySelector('.tab-nav-container');
const section2 = document.querySelector('.section-2');

// 预计算关键参数
const navbarHeight = navbar.offsetHeight;
const section2Top = section2.offsetTop;
const section2Height = section2.offsetHeight;

// 监听滚动事件
window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const tabNavHeight = tabNavContainer.offsetHeight;
  // 计算区块2的有效底部边界：滚动到此处时tab导航需隐藏
  const section2Bottom = section2Top + section2Height - navbarHeight - tabNavHeight;

  // 判断是否处于区块2的有效范围
  if (scrollTop >= section2Top && scrollTop <= section2Bottom) {
    tabNavContainer.classList.add('sticky');
  } else {
    tabNavContainer.classList.remove('sticky');
  }
});

关键细节说明 #

• 布局跳动处理：通过伪元素填充tab导航脱离文档流后的空白，保证页面滚动时布局稳定
• 边界判断：计算区块2底部边界时减去顶部导航和tab导航的高度，确保滚动到区块底部时tab导航自动隐藏，避免覆盖下方内容
• 层级控制：给固定的tab导航设置足够高的z-index，防止被其他页面元素遮挡

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