滚动方向判断不准导致顶部栏闪动
核心问题是靠 window.scrollY 的单次差值判断方向，但滚动惯性、触摸板加速、鼠标滚轮抖动会让 lastScrollY 和当前值的差值频繁正负切换。尤其在 macOS 上用触控板慢速滚动时，deltaY 经常在 ±1 之间跳变。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用「节流 + 方向锁」：只在滚动停止 150ms 后才更新方向状态，期间忽略所有中间变化
- 不依赖绝对差值，改用「滚动距离阈值」：比如连续向下滚动超过
5px才判定为向下，避免毛刺干扰 - 监听
wheel事件比scroll更及时，但要注意deltaY符号在不同设备上可能相反，统一用event.deltaY > 0表示向下滚动（Chrome/Firefox/Safari 一致）
CSS位移用 transform 还是 top？
用 top 会触发 layout，动画卡顿明显；用 transform: translateY() 是合成层操作，性能好得多。但要注意：如果父容器有 overflow: hidden 或 transform，可能截断移出区域的导航栏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 固定栏必须设
position: fixed，且top: 0初始值，再用transform: translateY(-100%)隐藏，不能只靠top: -60px - 隐藏/显示切换时，给
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)，避免生硬弹跳 - 别在
:hover上加位移动画——鼠标移入时滚动还在继续，容易和 JS 状态冲突
移动端 touchstart/touchend 事件没绑定导致失效
iOS Safari 和 Android Chrome 在页面滚动时默认不触发 scroll 事件（尤其是 overscroll 回弹阶段），纯靠 scroll 监听在手机上基本不可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时监听
touchstart记下pageY，touchmove计算偏移，touchend触发方向判定 - 注意
touchmove默认可滚动，要加event.preventDefault()——但只在你确实需要拦截滚动时才加，否则页面卡死 - 用
getBoundingClientRect().top检查导航栏是否已完全移出视口，比单纯依赖滚动方向更稳妥
隐藏后焦点元素被遮挡或键盘顶起
当顶部栏用 transform 移出屏幕，但 DOM 仍存在，iOS 键盘弹出会把整个页面往上推，导致原本在底部的 <input> 被顶到导航栏下方，用户看不见自己输入的内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检测到软键盘弹出（监听
focus事件 +window.visualViewport?.height缩小）时，强制显示顶部栏：element.style.transform = 'translateY(0)' - 给
<input>加scrollIntoView({ behavior: 'smooth', block: 'nearest' })，避免手动计算偏移 - 别用
visibility: hidden或opacity: 0隐藏导航栏——它们不释放空间，键盘顶起时依然占位
最麻烦的其实是 Safari 的视觉视口缩放行为，它会让 scrollY 在键盘收起后“滞后”更新，得用 setTimeout 延迟一帧再重置状态。这点很容易被忽略。
