滚动相关 · 滚到哪、变到哪
钉住滚动Pinned scroll
- 页面停住
- 里面在推进
- 把滚动换成时间轴
一整个区块被钉在屏幕上不动，可是滚动还在继续 —— 推进的是区块内部：一段画面被推着播完、几行字依次点亮、一张图被逐步拆开。它把「往下滚了多少距离」换成了「这条时间轴走到哪了」，所以观众的手一直在动，画面却始终停在同一个构图里。
什么时候用它
用在需要「讲一件事」的长页面上 —— 产品原理、时间线、一步步的操作说明。它要占用很长的滚动距离（一般 1.5–2 屏）来换一次演示，所以一页最多用两段；日常的功能页面别用：用户想找的东西被钉住了，会觉得页面卡死。
参数
position: sticky · top 0 · scroll range 1.6× viewport height · inner progress 0→1 · linear, no easing
配方
钉住滚动 → position: sticky · top 0 · scroll range 1.6× viewport height · inner progress 0→1 · linear, no easing
给 AI 的一句话
做一个钉住滚动的区块：外层容器高度设成 1.6 倍视口高，里面那层用 position: sticky; top: 0 钉住；读外层容器滚过了自身高度的多少，映射成 0→1 的进度，用这个进度推进区块内部的时间轴（播画面、点亮文字、拆解图）。进度必须是线性的、不加缓动 —— 手上滚多少，里面就动多少，加缓动会让它和手指脱节。