本文提供一个健壮的 jQuery 滚动监听方案，解决固定头部（sticky header）在页面顶部未正确清除 showHeader 类的问题，确保滚动方向判断精准、边界条件完备、视觉状态始终一致。
本文提供一个健壮的 jquery 滚动监听方案，解决固定头部（sticky header）在页面顶部未正确清除 `showheader` 类的问题，确保滚动方向判断精准、边界条件完备、视觉状态始终一致。
在构建现代单页应用或长内容网站时，「滚动隐藏/显示固定头部」是一种常见且提升用户体验的交互模式：向下滚动时收起导航栏节省垂直空间，向上滚动时自动浮现便于快速跳转，而当用户滚动回页面顶部时，头部应恢复初始状态（即既不 hideHeader 也不 showHeader），以保持视觉一致性与 DOM 清洁性。
原代码的核心缺陷在于逻辑分支缺失对顶部边界的显式处理。其 else 分支仅覆盖“向上滚动”，却未区分「向上滚动至顶部」和「向上滚动在中部」两种场景；同时依赖 st + $(window).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
- ✅ 无障碍考量：切换头部可见性时，建议同步更新 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;），即可获得丝滑、可靠、符合直觉的滚动头部交互体验。
