Bootstrap 4.0.0-beta.2 Scrollspy滚动时active类不更新问题

嘿，我刚好碰到过类似的问题！你的锚点跳转功能正常，但滚动时导航高亮始终停留在初始状态，核心原因就是没有监听页面的滚动事件，也没做「判断当前视口显示哪个板块→更新对应导航高亮」的逻辑。我给你一步步拆解解决方案：

一、先做好基础标识统一 #

确保导航链接和对应板块的标识一一对应：

• 给所有导航链接加一个共同类名（比如nav-link），方便批量获取元素；
• 每个导航链接的href属性值，要和对应板块的id完全匹配（比如<a href="#about" class="nav-link">关于我</a>对应<section id="about" class="section">...</section>）。

二、编写滚动监听的核心逻辑 #

你需要添加一段JavaScript代码，监听页面滚动事件，实时判断哪个板块处于视口内，再更新导航链接的高亮状态：

// 获取所有导航链接和板块元素
const navLinks = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.section');

// 定义滚动时的高亮处理函数
function updateNavHighlight() {
  let currentSectionId = '';

  // 遍历所有板块，判断哪个处于视口范围内
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    // 这里的判断逻辑：当板块顶部距离页面顶部的距离，小于等于「滚动距离+视口高度的一半」时，认为该板块处于视口核心区域
    // 你可以根据自己的页面布局调整这个判断条件，优化高亮触发的时机
    if (window.scrollY >= sectionTop - window.innerHeight / 2) {
      currentSectionId = section.getAttribute('id');
    }
  });

  // 更新导航链接的高亮状态
  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === `#${currentSectionId}`) {
      link.classList.add('active');
    }
  });
}

// 给页面添加滚动监听
window.addEventListener('scroll', updateNavHighlight);
// 页面加载完成后也执行一次，确保初始高亮状态正确
window.addEventListener('load', updateNavHighlight);

三、补充高亮样式 #

别忘了在CSS里定义active类的高亮样式，比如：

.nav-link.active {
  color: #2563eb; /* 替换成你想要的高亮颜色 */
  font-weight: bold;
  border-bottom: 2px solid #2563eb;
}

四、优化细节（可选） #

如果你的页面有固定导航栏，记得在计算sectionTop时减去导航栏的高度，避免导航栏遮挡导致判断不准确：

const navBar = document.querySelector('.navbar');
// 替换原来的sectionTop计算
const sectionTop = section.offsetTop - navBar.offsetHeight;

另外，为了避免滚动时函数频繁触发影响性能，可以给滚动监听加个节流：

// 节流函数：控制函数在指定时间内只执行一次
function throttle(func, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

// 使用节流后的函数监听滚动
window.addEventListener('scroll', throttle(updateNavHighlight, 100));

内容的提问来源于stack exchange，提问作者Raghavendra N Saralaya