滚动到对应Section时为导航链接添加active类的实现问题

问题解决方案 #

核心问题分析 #

原代码无法匹配到导航链接的原因是：导航使用了完整URL格式（如http://www.somedomain.com#welcome），但脚本中用[href="#${id}"]的选择器只能匹配纯锚点链接，无法匹配带域名的完整URL。同时首次加载时无.active元素会导致报错，需要补充边界判断。

修改后的完整代码 #

JavaScript

const changeNav = (entries, observer) => {
    entries.forEach((entry) => {
        if(entry.isIntersecting && entry.intersectionRatio >= 0.85) {
            // 先判断是否存在active元素，避免首次加载报错
            const activeLink = document.querySelector('.nav-link.active');
            if(activeLink) {
                activeLink.classList.remove('active');
            }
            // 获取当前section的id
            const id = entry.target.getAttribute('id');
            // 匹配href以#id结尾的导航链接（适配完整URL）
            const targetLink = document.querySelector(`[href$="#${id}"]`);
            if(targetLink) {
                targetLink.classList.add('active');
            }
        }
    });
}

const options = {
    threshold: 0.85,
    // 可选：设置rootMargin让激活时机更贴合视觉体验（比如section接近顶部时提前激活）
    // rootMargin: "-100px 0px"
}

const observer = new IntersectionObserver(changeNav, options);

// 监听所有section元素
const sections = document.querySelectorAll('section');
sections.forEach((section) => {
    observer.observe(section);
});

CSS（优化增强）

nav {
    position: sticky;
    top: 0;
    background-color: #f4f4f4; /* 给导航添加背景，避免被内容遮挡 */
    z-index: 100; /* 确保导航层级高于内容 */
}

.wrapper {
    display: inline-flex;
    justify-content: space-between;
    background-color: #f4f4f4;
    padding-top: 0;
    width: 100%;
}

.nav-link.active {
    color: #aa812d;
    font-weight: bold; /* 可选：增强active状态的辨识度 */
}

.section {
    padding-top: 20px; /* 避免section内容被粘性导航遮挡 */
}

HTML（可选调整）

如果navFunction没有实际功能，建议移除onclick="navFunction()"属性，避免控制台报错。

兼容性更强的匹配方式（可选） #

如果导航链接的域名可能变化，可通过提取URL锚点的方式匹配，不受域名影响：

// 替换原匹配链接的逻辑
const allLinks = document.querySelectorAll('.nav-link');
const targetLink = Array.from(allLinks).find(link => {
    return new URL(link.href).hash === `#${id}`;
});
if(targetLink) {
    targetLink.classList.add('active');
}

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