页面顶部导航#home的active类丢失问题求助及代码排查

咱们先拆解下你代码里的几个核心问题，这正是导致修复逻辑失效的原因：

• 错误的滚动值判断：你写了if (st.scrollTop == 0)，但实际上st已经是通过$(this).scrollTop()获取到的滚动距离数值，直接用st === 0判断即可——st.scrollTop是不存在的属性，这会让条件永远不成立。
• 错误的ID获取逻辑：var id = $(this).attr('id');里的this指向document对象，而document没有id属性，所以id的值是undefined，自然无法定位到对应的导航链接。
• 逻辑顺序冲突：你先处理了顶部滚动的情况，但后面的.each循环会重新遍历所有区块，覆盖之前的active类操作，导致顶部的active设置被冲掉。

修复后的完整代码 #

$(document).ready(function () {
    var navTop = $('#navbar').offset().top;
    var navHeight = $('#navbar').height();
    var windowH = $(window).height();
    $('.section').height(windowH);

    $(document).scroll(function () {
        var st = $(this).scrollTop();
        // 先重置所有激活状态，避免多个元素同时高亮
        $('#navbar li').removeClass('active');
        $('.section').removeClass('active');

        // 特殊处理滚动到顶部的场景
        if (st === 0) {
            $('#home').addClass('active');
            $('a[href="#home"]').parent('li').addClass('active');
            return; // 直接跳出函数，避免后续循环覆盖设置
        }

        // 导航栏固定逻辑（如需启用可取消注释）
        // if (st > navTop) {
        //     $('#navbar').addClass('fix');
        //     $('.section:eq(0)').css({
        //         'margin-top': navHeight
        //     });
        // } else {
        //     $('#navbar').removeClass('fix');
        //     $('.section:eq(0)').css({
        //         'margin-top': '0'
        //     });
        // }

        // 遍历区块判断当前激活项
        $('.section').each(function (index, element) {
            var sectionTop = $(this).offset().top;
            var sectionHeight = $(this).height();
            // 优化判断条件，适配导航栏高度的影响
            if (st + navHeight >= sectionTop && st + navHeight < sectionTop + sectionHeight) {
                $(this).addClass('active');
                var id = $(this).attr('id');
                $('a[href="#' + id + '"]').parent('li').addClass('active');
            }
        });
    });
});

关键修改说明 #

1. 统一重置激活状态：每次滚动事件触发时，先移除所有区块和导航项的active类，避免出现多个元素同时高亮的混乱情况。
2. 精准处理顶部场景：当滚动距离为0时，直接给#home区块和对应导航项添加active类，然后用return跳出函数，防止后续的循环逻辑覆盖这个设置。
3. 修正选择器写法：你之前用的"是HTML实体转义字符，在JavaScript里直接用单/双引号即可，比如'a[href="#' + id + '"]'。
4. 优化区块匹配逻辑：调整条件判断的边界值，确保导航栏高度不会影响区块的激活判断，避免边界场景的匹配错误。

这样修改后，滚动到页面最顶部时，#home对应的导航项就能稳定保持active类，不会被意外移除了。

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