往下滚导航让路，往上滚立刻回来

open-design.ai 顶部 site-chrome 的 Headroom 模式 —— 阅读时导航不占屏，想导航时一抬手就在。

为什么不是滚过阈值就藏

老式做法"滚过 300px 隐藏"，会在用户回滚找导航时失灵。Headroom 看的是方向：向下滚是在读内容，导航退场把整屏让给正文；向上滚是想回头或找入口，导航立刻返场。判定只差一个符号位，体验差一个档次。

displacement 小于 6px 的抖动不触发判定 —— trackpad 惯性、手指微颤、滚动回弹都被这个死区吃掉，导航不会神经质地闪。官网的 scrollDelta 就是 6。

页面顶部 100px 内永远显示（showTopThreshold=100）：刚开始滚就藏导航显得慌张，顶部本来也遮不住什么内容。

trackpad 的 scroll 事件超过 60Hz，每个事件都读 scrollY 写 class 会强制同步布局。官网把监听包进 requestAnimationFrame：一帧内的事件风暴折叠成一次 DOM 变更，PageSpeed 实测省下约 700ms 的 forced reflow。

JS 只负责 is-hidden 的加减，位移动画完全交给 CSS transition（transform .28s ease）。合成器处理 translateY，不触发布局。

在这个 iframe 里上下滚动，盯右下角 HUD：y 是滚动位置，Δ 是本帧位移，状态跟着方向翻转。慢慢滚（Δ 在 ±6 以内）导航纹丝不动。

滚回顶部 100px 内，无论方向，导航必定在场。