滚动时如何让导航菜单的active链接正常工作？

问题核心原因 #

代码无法正常运行主要有两个关键问题：

1. 选择器语法错误：原代码中document.querySelector('header .nav_container nav a [href*=' + id + ']')的空格是错误的——空格会让浏览器寻找a标签下包含href属性的子元素，但href是a标签自身的属性，多余的空格导致无法定位目标元素。
2. 逻辑冗余：在遍历所有导航链接时重复执行classList.add('active')，多次操作同一个元素，完全没有必要。

修复后的JavaScript代码 #

let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header .nav_container nav a');

window.onscroll = () => {
    sections.forEach(sec => {
        let top = window.scrollY;
        let offset = sec.offsetTop - 150;
        let height = sec.offsetHeight;
        let id = sec.getAttribute('id');

        if(top >= offset && top < offset + height) {
            // 移除所有导航链接的active类
            navLinks.forEach(link => link.classList.remove('active'));
            // 匹配对应href的a标签并添加active类（修正选择器，去掉多余空格）
            document.querySelector(`header .nav_container nav a[href*="${id}"]`).classList.add('active');
        }
    });
};

高效优化方案（可选） #

如果想避免scroll事件频繁触发的性能问题，推荐使用Intersection Observer API：

let navLinks = document.querySelectorAll('header .nav_container nav a');
const observerOptions = {
    root: null,
    rootMargin: '-150px 0px -70% 0px', // 对应原offset的触发逻辑
    threshold: 0
};

const sectionObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            navLinks.forEach(link => link.classList.remove('active'));
            document.querySelector(`header .nav_container nav a[href*="${entry.target.id}"]`).classList.add('active');
        }
    });
}, observerOptions);

// 监听所有section元素
document.querySelectorAll('section').forEach(sec => sectionObserver.observe(sec));

说明 #

你的HTML和CSS部分无需修改，替换上述任意一段JavaScript代码即可实现滚动时导航链接自动切换active状态的功能。

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