如何简化实现滚动向上显示、向下隐藏的固定顶部头部jQuery代码？

你的固定头部滚动隐藏/显示功能已经正常运行，下面是更简洁的jQuery实现版本，去掉了冗余的定时器逻辑，同时保留原有的防抖和边界判断：

优化后的jQuery代码 #

jQuery(function($) {
    let lastScrollTop = 0;
    const delta = 5;
    const $header = $('.site-header');
    const navbarHeight = $header.outerHeight();

    $(window).on('scroll', function() {
        const st = $(this).scrollTop();
        // 忽略小幅度滚动，避免频繁触发
        if (Math.abs(lastScrollTop - st) <= delta) return;

        // 向下滚动且超出头部高度时隐藏
        if (st > lastScrollTop && st > navbarHeight) {
            $header.addClass('hidden');
        } 
        // 向上滚动且未到页面底部时显示
        else if (st + $(window).height() < $(document).height()) {
            $header.removeClass('hidden');
        }

        lastScrollTop = st;
    });
});

优化说明 #

• 移除了原代码中的didScroll变量和setInterval定时器，直接在滚动事件内处理逻辑，代码结构更紧凑
• 提前缓存$('.site-header')为变量$header，避免每次操作DOM时重复查找元素，提升性能
• 用let/const替代var，符合现代JavaScript语法规范
• 保留了原有的delta防抖逻辑，避免小幅度滚动时频繁切换类名
• 合并了判断分支，逻辑更清晰

你的HTML和CSS代码无需修改，直接替换上述jQuery代码即可正常运行。

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