滚动相关 · 滚到哪、变到哪
按滚动方向收纳导航Direction-aware nav hide
- 让位
- 瞬间回来
- 不抢视线
往下读的时候顶部那条导航自己滑走了，把屏幕让给内容；只要往上滚一点点，它立刻滑回来 —— 哪怕你还在页面很下面。
什么时候用它
长列表、长文章、手机上信息密度高的页面用它；页面本来就短（不用滚）或导航里有关键操作（比如结算）时别收，用户会找不到。
参数
deltaY > 15px → transform: translateY(-100%) · deltaY < -15px → transform: translateY(0) · 320ms ease-out
配方
按滚动方向收纳导航 → 320ms ease-out条件 deltaY > 15px → transform: translateY(-100%)条件 deltaY < -15px → transform: translateY(0)
给 AI 的一句话
给我加一个按滚动方向收纳的顶栏：比较这一帧和上一帧的滚动位置，往下滚就把顶栏 translateY(-100%) 收走，往上滚立刻 translateY(0) 放回来，中间留 15px 容差防抖，位移用 320ms ease-out。回到页面顶部时永远显示。