顶栏滚动自动隐藏需用 intersectionobserver 或 scroll 事件监听，禁用:hover等伪类；推荐用占位div配合threshold[0]触发，结合lastscrolly与5px阈值节流判断方向，避免闪现，并为body设overscroll-behavior-y:contain。
顶栏滚动时自动隐藏，需要监听 scroll 事件而非仅靠 CSS
纯 CSS 无法可靠检测滚动方向或位置变化，window.onscroll 或 IntersectionObserver 是必须的。常见误区是试图用 :hover 或 @media (prefers-reduced-motion) 替代滚动逻辑——它们不响应滚动位移。
推荐用 IntersectionObserver 监听顶部区域（如 #header）是否“刚进入视口”，比手动计算 scrollTop 更稳定、性能更好，且天然防抖。
- 观察目标设为一个占位
<div id="scroll-trigger"></div>，固定在页面顶部下方 1px 处 - 触发阈值设为
{ threshold: [0] }，确保首次进入即回调 - 回调中根据
isIntersecting切换.hidden类，而不是直接操作style.display
scroll-up 样式切换的关键是区分“向上滚”和“向下滚”
仅靠 scrollTop 增减判断方向容易误判（比如快速来回滚动、触摸板惯性）。必须缓存上一次位置，并加最小位移阈值（如 5px）过滤抖动。
典型错误：每次 scroll 都立即切换 class，导致顶栏在滚动末尾反复闪现。正确做法是加节流 + 方向锁定：
- 用
let lastScrollY = 0和let ticking = false控制更新节奏 - 只在
scrollY > lastScrollY + 5（向下）时添加.scrolled-down并移除.hidden - 只在
scrollY （向上）时添加 <code>.hidden并移除.scrolled-down - CSS 中用
.header.hidden { transform: translateY(-100%); }，避免display: none破坏过渡
transition 动画必须作用于 transform 和 opacity，不能用 top/left
用 top: -80px 配合 transition: top 0.3s 会导致强制同步布局（layout thrashing），尤其在低端安卓 WebView 中卡顿明显。现代方案只依赖 transform：
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
transform: translateY(0);
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.header.hidden {
transform: translateY(-100%);
}
.header.scrolled-down {
transform: translateY(-100%);
}
注意：cubic-bezier(0.22, 0.61, 0.36, 1) 比 ease-out 更自然，避免“弹跳感”。若需兼容 IE11，可降级为 transition: -ms-transform 0.3s，但 IE11 不支持 IntersectionObserver，需 fallback 到 scroll 监听。
移动端 Safari 的 overscroll bounce 会干扰 scrollY 判断
iOS Safari 在页面顶部继续下拉时，window.scrollY 可能短暂变为负值（如 -50），导致误判为“向上滚动”。不能直接用 Math.abs(scrollY) 修复，因为这会掩盖真实方向。
稳妥做法是忽略负值区间：
- 在 scroll 回调开头加
if (scrollY - 或更严格地：只在
scrollY >= 0且Math.abs(scrollY - lastScrollY) > 5时更新状态 - 同时给
加overscroll-behavior-y: contain（Chrome/Edge/Firefox 支持，Safari 16+ 支持），减少 bounce 幅度
如果项目需支持 iOS 15 及以下，必须结合 touchstart/touchmove 记录起始 Y，并在 touchend 后校准一次 scrollY，否则用户快速下滑后松手，顶栏可能卡在半隐藏状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
