滚动页面移除导航栏active类失效，求JQuery代码解决方案

我来帮你排查下这个滚动导航的问题～你的代码思路是对的，但有几个细节没处理好，导致功能失效：

问题点分析 #

• 选择器错误：$('nav')选中的是整个导航容器，而不是里面的单个菜单项（比如nav li或nav a），所以你给整个导航加/移除active类肯定不对。
• 位置计算不准确：position().top是元素相对于父元素的偏移量，滚动判断应该用offset().top，它是元素相对于文档顶部的绝对位置，这样计算才准确。
• 重复操作逻辑：在each循环里每次都执行$('nav').removeClass('active')会导致重复移除，应该先统一移除所有菜单项的active类，再给对应项添加。

修正后的代码 #

假设你的导航结构是类似<nav><ul><li>...</li></ul></nav>，我们把选择器改成nav li（如果是a标签就改成nav a），调整位置计算和逻辑顺序：

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        // 先移除所有导航项的active类
        $('nav li.active').removeClass('active');
        $('.wrapper section').each(function(i) {
            // 用offset().top获取元素相对于文档顶部的位置
            if ($(this).offset().top <= windscroll - 20) {
                // 给对应索引的导航项添加active类
                $('nav li').eq(i).addClass('active');
            }
        });
    } else {
        // 滚动到顶部时移除所有active类
        $('nav li.active').removeClass('active');
    }
}).scroll(); // 初始化时触发一次滚动事件

额外提示 #

• 确保你的section数量和导航项数量一一对应，否则eq(i)会匹配错误。
• 如果滚动时出现频繁切换的情况，可以给滚动事件加个节流函数优化性能，比如：

function throttle(func, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                func.apply(this, arguments);
                timer = null;
            }, delay);
        }
    }
}

$(window).scroll(throttle(function() {
    // 这里放上面的滚动逻辑
}, 100)).scroll();

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