点击导航栏链接后滚动无法移除.change类的技术问题求助

问题现象 #

实现粘性导航栏时，期望滚动页面自动给对应导航链接添加/移除.change类，但出现以下异常：

• 点击导航链接后滚动，被点击的链接.change类无法移除
• 点击新链接后，新链接的.change类会“卡住”，只有点击其他链接时才会移除前一个的.change类

问题根源 #

1. 原代码遍历所有sections时，每一个满足滚动条件的section都会执行一次“移除所有链接的.change类→给当前section对应链接加类”的操作，最终只有最后一个满足条件的section对应的链接会保留.change类，逻辑顺序错误
2. 错误设置了HTML属性pointer-events（这是CSS属性，不是HTML属性），而且该设置会导致链接失去点击事件，完全没必要
3. 未处理滚动到页面顶部（所有section都不满足window.pageYOffset >= section.offsetTop - 200）的边界情况

修复方案 #

修复后的完整代码 #

JavaScript

const sections = document.querySelectorAll('section');
const navbarLinks = document.querySelectorAll('.navbar-link');

// 监听滚动事件更新导航状态
window.addEventListener('scroll', updateActiveNav);

// 点击导航链接后延迟更新，确保锚点滚动完成
navbarLinks.forEach(link => {
  link.addEventListener('click', () => setTimeout(updateActiveNav, 100));
});

// 页面加载时初始化一次
updateActiveNav();

function updateActiveNav() {
  let currentIndex = -1;

  // 找到当前滚动位置对应的section索引
  sections.forEach((section, idx) => {
    if (window.pageYOffset >= section.offsetTop - 200) {
      currentIndex = idx;
    }
  });

  // 先移除所有链接的.change类
  navbarLinks.forEach(link => link.classList.remove('change'));

  // 根据当前索引设置激活状态，滚动到顶部默认激活第一个链接
  if (currentIndex !== -1) {
    navbarLinks[currentIndex].classList.add('change');
  } else {
    navbarLinks[0].classList.add('change');
  }
}

CSS（移除错误设置，保留原有样式）

:root {
  --grey-color: #ccc; /* 若未定义变量可自行替换为具体颜色值 */
}

.navbar-link {
  font-size: 1.7rem;
  font-weight: 600;
  color: whitesmoke;
  margin: 0 3rem;
  letter-spacing: .3rem;
  text-transform: uppercase;
  position: relative;
  transition: color .2s;
}

.navbar-link::before {
  content: "";
  width: 0;
  height: .2rem;
  background-color: var(--grey-color);
  position: absolute;
  right: -9%;
  bottom: -.2rem;
  transition: width .2s;
}

.navbar-link:hover {
  color: var(--grey-color)
}

.navbar-link:hover::before {
  width: 120%;
}

.change.navbar-link {
  color: var(--grey-color)
}

.change.navbar-link::before {
  width: 120%;
}

HTML（保持原有结构，需确保section的id与链接href对应）

<nav class="navbar center">
  <a href="#home" class="navbar-link">Home</a>
  <a href="#about" class="navbar-link">About</a>
  <a href="#projects" class="navbar-link">Portfolio</a>
  <a href="#contact" class="navbar-link">Contact</a>
</nav>

<!-- 示例section，需与链接href对应 -->
<section id="home" style="height: 100vh; background: #1a1a1a;"></section>
<section id="about" style="height: 100vh; background: #2a2a2a;"></section>
<section id="projects" style="height: 100vh; background: #3a3a3a;"></section>
<section id="contact" style="height: 100vh; background: #4a4a4a;"></section>

关键修复点 #

• 将导航更新逻辑封装为独立函数，避免遍历sections时重复执行移除/添加操作
• 点击链接后延迟执行更新，确保锚点滚动完成后再同步激活状态
• 移除错误的pointer-events属性设置，恢复链接正常点击功能
• 处理滚动到顶部的边界情况，默认激活第一个导航链接（可根据需求调整）

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