JavaScript 实现导航菜单滚动到指定位置高亮效果的方法

在网页设计中，导航菜单滚动到指定位置时的高亮效果能极大提升用户体验，帮助用户快速定位当前浏览位置。而 JavaScript 作为网页交互的强大工具，为实现这一效果提供了多种有效途径。

需要获取页面元素。使用 document.querySelectorAll 方法可以轻松选中导航菜单的列表项以及对应的目标区域元素。例如：

const menuItems = document.querySelectorAll('.menu-item');
const sections = document.querySelectorAll('.section');

这里假设 menu-item 是导航菜单项的类名，section 是页面各目标区域的类名。

接下来，为窗口的滚动事件添加监听器。当用户滚动页面时，JavaScript 会执行相应的判断逻辑。代码如下：

window.addEventListener('scroll', function () {
    sections.forEach((section, index) => {
        const rect = section.getBoundingClientRect();
        if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
            menuItems.forEach(item => item.classList.remove('active'));
            menuItems[index].classList.add('active');
        }
    });
});

在这段代码中，getBoundingClientRect 方法用于获取元素相对于视口的位置信息。通过判断目标区域是否在视口的中间位置（这里以视口高度的一半为参考），来决定是否高亮对应的导航菜单项。如果某一目标区域满足条件，就先移除所有菜单项的 active 类（假设 active 类用于控制高亮样式），再为当前对应的菜单项添加 active 类，从而实现高亮效果。

另外，为了让用户点击导航菜单项时也能平滑滚动到指定位置并保持高亮，可以为菜单项添加点击事件监听器：

menuItems.forEach((item, index) => {
    item.addEventListener('click', function (e) {
        e.preventDefault();
        sections[index].scrollIntoView({ behavior:'smooth' });
        menuItems.forEach(menu => menu.classList.remove('active'));
        item.classList.add('active');
    });
});

这里 scrollIntoView 方法使页面平滑滚动到对应的目标区域，同时调整菜单项的高亮状态。

通过以上 JavaScript 代码的运用，能为网页打造出流畅且直观的导航菜单滚动高亮效果，增强用户与页面的交互体验，让用户在浏览页面时更加清晰地了解自己所在的位置，提升网站的整体品质。