适配jQuery 3.6.4：更新头部导航隐藏JavaScript代码

核心兼容问题 #

1. this 指向错误
   原代码中hasScrolled函数里的var st = $(this).scrollTop()在jQuery 3.x中会失效。因为hasScrolled是通过setInterval直接调用的，此时this并不指向window，导致无法正确获取滚动距离，这是代码无法触发的主要原因。

2. 重复绑定滚动事件
   代码同时使用$(window).on('scroll', ...)和$(window).scroll(...)绑定滚动事件，虽然jQuery 3.x支持该写法，但容易造成逻辑混乱，建议合并处理。

修复后的代码 #

// Hide Header on scroll down
$(function(){   
    var didScroll;
    var lastScrollTop = 0;
    var delta = 5;
    var navbarHeight = $('#header').outerHeight();
    var parallaxHeight = $('.homeSlide, .who-slide').outerHeight();

    $(window).on('scroll', function(event){
        didScroll = true;
        // 合并页面底部检测逻辑
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $('#header.scroll, #header.para-scroll').css({'top' : 0});
        } else {
            $('#header.scroll, #header.para-scroll').removeAttr("style");
        }
    });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);

    function hasScrolled() {
        // 修正：直接从window获取滚动距离，避免this指向问题
        var st = $(window).scrollTop();
        
        // 忽略小幅度滚动
        if(Math.abs(lastScrollTop - st) <= delta)
            return;
        
        // 向下滚动超过导航栏高度，隐藏普通导航
        if (st > lastScrollTop && st > navbarHeight) {
             $('#header.scroll').removeClass('nav-down').addClass('nav-up');
        }
        // 向下滚动超过视差横幅高度，隐藏视差页面导航
        if (st > lastScrollTop && st > parallaxHeight + 10){
            $('#header.para-scroll').removeClass('nav-down').addClass('nav-up');
        } 
        // 向上滚动且未到页面底部时，显示导航
        else {
            if(st + $(window).height() < $(document).height()) {
                $('#header.scroll, #header.para-scroll').removeClass('nav-up').addClass('nav-down');
            }
        }
        
        lastScrollTop = st;
    }
});

额外注意事项 #

• 确保#header元素在页面初始化时处于可见状态，否则outerHeight()会返回0，导致滚动判断逻辑失效。如果头部是动态显示的，需要在头部显示后重新计算navbarHeight。
• jQuery 3.x对事件处理逻辑做了优化，避免使用已废弃的API（你的代码未涉及废弃API，主要问题为上下文指向）。

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