滚动时导航栏active类切换失效的JavaScript代码修复

以下是该效果的常见失效原因，以及可直接运行的修正代码：

• 导航链接href属性与对应区块id不匹配，无法建立映射关系
• 滚动位置计算未考虑固定导航栏的高度偏移，导致切换时机错位甚至完全不触发
• 切换active类时未先清空其他导航项的active状态，出现多个导航项同时高亮
• CSS中active类样式优先级不足，被导航项默认样式覆盖，视觉上看不到切换效果
• 滚动事件未做性能优化，触发频率过高导致浏览器卡顿，状态更新延迟

完整实现代码 #

HTML结构 #

<!-- 固定导航栏 -->
<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#home" class="nav-link active">Home</a></li>
    <li><a href="#about" class="nav-link">About Me</a></li>
    <li><a href="#works" class="nav-link">My Works</a></li>
    <li><a href="#contact" class="nav-link">Contact</a></li>
  </ul>
</nav>

<!-- 页面滚动区块 -->
<section id="home" class="page-section">Home 区块</section>
<section id="about" class="page-section">About Me 区块</section>
<section id="works" class="page-section">My Works 区块</section>
<section id="contact" class="page-section">Contact 区块</section>

CSS样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 可选：平滑滚动 */
  scroll-behavior: smooth;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  z-index: 999;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  padding: 1rem 2rem;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  color: #222222;
  transition: background 0.2s ease;
}

/* active状态样式，注意选择器优先级高于默认nav-link */
.nav-link.active {
  background: #7e22ce; /* 紫色高亮 */
  color: #ffffff;
}

.page-section {
  min-height: 100vh;
  /* 顶部内边距预留导航栏高度，避免内容被导航遮挡 */
  padding: 80px 2rem 2rem;
  font-size: 2.5rem;
}

#home { background: #f8fafc; }
#about { background: #f1f5f9; }
#works { background: #e2e8f0; }
#contact { background: #cbd5e1; }

JavaScript逻辑 #

// 获取DOM元素
const navLinks = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.page-section');
const navBar = document.querySelector('.navbar');
// 计算导航栏高度，作为滚动偏移量
const navOffset = navBar.offsetHeight;

function updateActiveNav() {
  // 当前滚动位置，增加偏移量让切换时机更自然
  const currentScrollY = window.scrollY + navOffset + 20;

  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionBottom = sectionTop + section.offsetHeight;
    const targetLink = document.querySelector(`.nav-link[href="#${section.id}"]`);

    // 判断当前视口是否落在对应区块内
    if (currentScrollY >= sectionTop && currentScrollY < sectionBottom) {
      // 先清除所有导航项的active类
      navLinks.forEach(link => link.classList.remove('active'));
      // 给当前区块对应的导航项加active类
      targetLink.classList.add('active');
    }
  });
}

// 页面初始化时执行一次，匹配首屏状态
window.addEventListener('load', updateActiveNav);
// 滚动事件加节流优化，避免高频触发卡顿
let throttleTimer;
window.addEventListener('scroll', () => {
  if (throttleTimer) return;
  throttleTimer = setTimeout(() => {
    updateActiveNav();
    throttleTimer = null;
  }, 15);
});

核对代码时注意以下细节：

1. 导航链接的href必须和区块id完全一致，大小写敏感，前缀必须带#
2. 如果你的导航栏不是固定定位，可根据实际布局调整currentScrollY的偏移数值
3. 不要给body/html设置额外的margin、padding或transform属性，避免影响offsetTop计算结果
4. 如果需要页面加载后直接定位到某个锚点，可在初始化逻辑中补充对应跳转代码

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