滚动隐藏头部，上滑显示完整方案

本文详解了一种健壮、精准且生产就绪的滚动隐藏/显示固定头部交互方案，重点修复了常见实现中因边界逻辑缺失导致的顶部状态残留问题——通过优先检测页面顶部位置、严格区分上下滚动方向、原子化操作CSS类名，并辅以节流优化、移动端容错和无障碍支持，确保在各种设备与滚动场景下头部始终呈现正确、一致、丝滑的视觉状态，让开发者轻松集成高可用的滚动导航体验。

本文提供一个健壮的 jQuery 滚动监听方案，解决固定头部（sticky header）在页面顶部未正确清除 showHeader 类的问题，确保滚动方向判断精准、边界条件完备、视觉状态始终一致。

本文提供一个健壮的 jQuery 滚动监听方案，解决固定头部（sticky header）在页面顶部未正确清除 `showHeader` 类的问题，确保滚动方向判断精准、边界条件完备、视觉状态始终一致。

在构建现代单页应用或长内容网站时，「滚动隐藏/显示固定头部」是一种常见且提升用户体验的交互模式：向下滚动时收起导航栏节省垂直空间，向上滚动时自动浮现便于快速跳转，而当用户滚动回页面顶部时，头部应恢复初始状态（即既不 hideHeader 也不 showHeader），以保持视觉一致性与 DOM 清洁性。

原代码的核心缺陷在于逻辑分支缺失对顶部边界的显式处理。其 else 分支仅覆盖“向上滚动”，却未区分「向上滚动至顶部」和「向上滚动在中部」两种场景；同时依赖 st + $(window).height() < $(document).height() 判断是否“可继续上滑”，该条件与头部显隐无直接关联，反而干扰了状态归零逻辑。

以下是优化后的完整实现，已通过多设备、不同文档高度场景验证：

$(function() {
    var didScroll = false;
    var lastScrollTop = 0;
    var $header = $('.sticky-header');
    var navbarHeight = $header.outerHeight() || 60; // 提供安全默认值

    // 节流滚动监听（推荐使用 requestAnimationFrame 替代 setInterval，此处保留兼容性写法）
    $(window).on('scroll', function() {
        didScroll = true;
    });

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

    function hasScrolled() {
        var st = $(this).scrollTop();

        // 【关键修复】优先检测是否位于顶部区域（含滚动到顶或轻微偏移）
        if (st <= navbarHeight) {
            $header.removeClass('hideHeader showHeader');
            lastScrollTop = st;
            return;
        }

        // 向下滚动：隐藏头部（需确保已过导航区）
        if (st > lastScrollTop && st > navbarHeight) {
            $header.removeClass('showHeader').addClass('hideHeader');
        } 
        // 向上滚动：显示头部
        else if (st < lastScrollTop) {
            $header.removeClass('hideHeader').addClass('showHeader');
        }

        lastScrollTop = st;
    }
});

重要注意事项：

• ✅ CSS 类名大小写统一：原文中 showHeader 与 showheader 混用，务必确保 HTML 中 class 名、JS 中字符串、CSS 规则三者完全一致（推荐全小写如 show-header / hide-header，更符合 CSS 命名惯例）；
• ✅ 防抖优于定时器：setInterval + 标志位方式存在约 250ms 延迟。生产环境建议升级为 requestAnimationFrame 节流（见下方精简版）；
• ✅ 移动端兼容性：iOS Safari 可能触发非预期 scroll 事件，可在 hasScrolled 开头添加 if (st < 0) st = 0; 防止负值干扰；
• ✅ 无障碍考量：切换头部可见性时，建议同步更新 aria-hidden 属性，例如 $('.sticky-header').attr('aria-hidden', st > navbarHeight && st > lastScrollTop);。

进阶优化（requestAnimationFrame 版，推荐用于新项目）：

let ticking = false;
$(window).on('scroll', function() {
    if (!ticking) {
        requestAnimationFrame(function() {
            hasScrolled();
            ticking = false;
        });
        ticking = true;
    }
});

总结而言，该方案通过「顶部优先判断 → 方向精确分流 → 状态原子化操作」三层逻辑，彻底规避了边界残留类名问题。开发者只需确保 DOM 结构中存在 .sticky-header 元素，并为其定义好 hideHeader 与 showHeader 的 CSS 过渡效果（如 transform: translateY(-100%); 或 opacity: 0;），即可获得丝滑、可靠、符合直觉的滚动头部交互体验。

好了，本文到此结束，带大家了解了《滚动隐藏头部，上滑显示完整方案》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！