如何用JavaScript实现导航栏高亮用户当前浏览的对应区块

你现有代码仅实现了鼠标悬停/移出的即时交互，缺少滚动状态判断逻辑，且直接操作内联样式优先级过高，不利于多状态切换，按以下步骤调整即可实现需求：

1. 优先用CSS类控制样式，替换原有JS写内联样式的逻辑 #

不要在JS里硬编码style属性，将样式拆分到对应CSS类中，状态切换只需增删类名即可，维护成本更低：

/* 导航项默认样式，对应你之前navBarStyle里写的规则 */
.nav-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    color: #000;
    text-decoration: none;
    margin: 0 0.5em;
    padding: 0.5em;
    background-color: rgb(220, 220, 220);
    font-size: large;
    transform: translateX(-0.5em);
}
/* 高亮状态：悬停、当前激活的导航项共用这套样式 */
.nav-item:hover,
.nav-item.active {
    background-color: #72a6ca;
    color: #fff;
}

前置要求：给所有导航<a>标签加上nav-item类名；每个导航项的href属性和对应区块的id一一绑定，例：导航项写<a href="#home" class="nav-item">首页</a>，对应区块写<section id="home">首页区块内容</section>。

2. 移除冗余的鼠标事件监听 #

上面写的CSS:hover已经自动实现鼠标悬停变色、移出恢复的效果，你之前写的mouseOver函数里绑定的mouseover、mouseout事件可以全部删掉，不需要额外JS处理鼠标交互。

3. 添加滚动监听逻辑，自动同步激活状态 #

核心逻辑：监听页面滚动事件，计算每个区块的位置，判断当前视口停留的区块，给对应导航项加上active类，其余导航项移除active类即可：

// 若你已经直接在HTML里给导航项加了nav-item类，这个函数可以删除
function initNavBaseStyle() {
    const navItems = document.getElementsByTagName('a');
    for (let i = 0; i < navItems.length; i++) {
        navItems[i].classList.add('nav-item');
    }
}

// 更新导航激活状态
function syncActiveNav() {
    // 注意：如果你的区块标签不是section，替换成你实际用的区块选择器
    const sections = document.querySelectorAll('section');
    const navItems = document.querySelectorAll('.nav-item');
    let activeSectionId = '';

    // 遍历所有区块，判定当前处于可视范围的区块
    for (let i = 0; i < sections.length; i++) {
        const section = sections[i];
        const sectionTop = section.offsetTop;
        // 偏移量可自行调整：如果导航是固定在顶部的，偏移量设为导航栏高度即可
        const offset = 100;
        if (window.scrollY >= sectionTop - offset) {
            activeSectionId = section.id;
        }
    }

    // 切换导航项的active类
    for (let i = 0; i < navItems.length; i++) {
        const item = navItems[i];
        item.classList.remove('active');
        if (item.getAttribute('href') === `#${activeSectionId}`) {
            item.classList.add('active');
        }
    }
}

// 页面加载完成后初始化
window.addEventListener('load', () => {
    initNavBaseStyle();
    syncActiveNav(); // 首屏加载时先执行一次，匹配初始状态
    window.addEventListener('scroll', syncActiveNav);
});

可选优化 #

• 给scroll事件加节流处理，避免滚动时频繁触发函数，降低性能消耗
• 如果做了点击导航平滑滚动的效果，点击导航项时可直接给当前点击项加active类，不用等滚动监听触发，反馈更即时
• 如果页面有页脚区块，可单独判断滚动到页面底部时，自动激活最后一个导航项，避免短区块识别不准

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