Bootstrap新手求助：页面滚动到指定区域时如何高亮对应导航栏项？

因为CSS本身没法监听页面滚动位置，也不能跨元素做条件样式关联，所以得靠JavaScript来实现这个需求，结合Bootstrap的结构，步骤如下：

1. 梳理对应关系的HTML结构 #

确保导航栏的每个链接和页面区块一一对应：

<!-- 粘性导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <div class="container">
    <a class="navbar-brand" href="#">MySite</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#landing">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#aboutme">关于我</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contactme">联系我</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 页面区块 -->
<section id="landing" style="height: 100vh; background: #f8f9fa;">首页区块</section>
<section id="aboutme" style="height: 100vh; background: #e9ecef;">关于我区块</section>
<section id="contactme" style="height: 100vh; background: #dee2e6;">联系我区块</section>

注意导航链接的href要和区块的id完全一致，方便后续关联匹配。

2. 定义激活状态的CSS样式 #

给导航项的激活状态设置变色样式，比如：

/* 自定义导航项激活时的样式 */
.nav-link.active {
  color: #dc3545 !important; /* 加!important是为了覆盖Bootstrap默认样式 */
  font-weight: bold;
}

3. 编写JavaScript监听滚动逻辑 #

这段代码会在页面滚动时，自动判断哪个区块进入视口，给对应导航项加上激活类：

// 获取所有带id的页面区块和导航链接
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');

window.addEventListener('scroll', () => {
  let currentSectionId = '';
  
  // 遍历区块，判断哪个区块处于视口范围内
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    // 减100px是为了适配粘性导航栏高度，让变色时机更自然，可自行调整数值
    if (pageYOffset >= sectionTop - 100) {
      currentSectionId = section.getAttribute('id');
    }
  });
  
  // 给对应导航项切换激活类
  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === `#${currentSectionId}`) {
      link.classList.add('active');
    }
  });
});

核心逻辑：每次滚动时，找出当前进入视口的区块，再匹配到对应的导航链接，通过添加/移除active类实现样式切换，完全贴合你需要的“条件触发变色”效果。

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