判断导航栏收起展开的关键是检测滚动方向变化而非单纯监听scroll事件，通过比较window.scrollY差值确定方向，配合节流、touch事件兼容及body padding-top调整实现平滑交互。
滚动时如何判断导航栏该收起还是展开
关键不是监听 scroll 事件本身，而是要捕捉用户滚动方向的变化。用 window.scrollY 记录上一次位置，和当前 window.scrollY 比较差值即可判断：差值为正说明向下滚，为负说明向上滚。但要注意首次滚动时没有“上一次位置”，得初始化一个 lastScrollY（比如设为 0），并在第一次触发后更新。
常见错误是只看 scrollY 是否大于某个阈值（如 100），这会导致只要页面滚下去就收起、滚回顶部就展开——完全忽略方向，结果就是轻微抖动也会反复触发，体验极差。
fixed 导航栏收起时如何避免页面内容上跳
直接对 .navbar 设置 transform: translateY(-100%) 或 height: 0 都不行：前者仍占文档流空间（除非加 position: fixed 本身已脱离流），后者会破坏 fixed 布局的定位基准。正确做法是给 body 加一个与导航栏等高的 padding-top，收起时移除它；展开时再加回来。
更稳妥的方式是用 top 控制位移，并配合 will-change: top 提升动画性能：
立即学习“前端免费学习笔记（深入）”；
nav.navbar {
position: fixed;
top: 0;
transition: top 0.3s ease-out;
will-change: top;
}
nav.navbar.hidden {
top: -60px; /* 假设导航栏高 60px */
}如何防止快速滚动时频繁触发收起/展开逻辑
滚动事件触发非常密集（每秒几十次），如果每次都在回调里做 DOM 操作或 class 切换，容易卡顿甚至丢帧。必须加节流（throttle），但注意不是简单用 setTimeout 延迟执行，而是要保证“最后一次滚动方向变化”被响应。
推荐用时间窗口 + 方向锁的方式：
- 记录最近一次方向变化的时间戳
- 如果新方向与上次不同，且距离上次变化超过 50ms，才触发状态切换
- 在滚动中持续更新方向，但只在“方向稳定”后更新 UI
避免用 requestAnimationFrame 包裹整个逻辑——它适合动画同步，不适合方向判定，反而可能延迟响应。
移动端 touch 滚动下为什么收起失效
iOS Safari 和部分安卓浏览器在 touchmove 过程中不会实时触发 scroll 事件，直到手指抬起才补发一次。这意味着向下滚动时，导航栏可能一直不收起，直到松手瞬间才跳变。
解决方法是同时监听 touchstart 和 touchmove，用 event.touches[0].clientY 计算滑动偏移量，自己维护一个滚动方向状态，并在 touchend 后清空缓存。但要注意：不能仅依赖 touch 事件，PC 端仍需 scroll，所以最终逻辑得合并两套方向判断源。
另一个易忽略点：body { overscroll-behavior: none } 能阻止下拉回弹干扰滚动方向检测，建议加上。
