Scroll · Moves as you scroll
Pinned scroll钉住滚动
- the page holds
- inner progress advances
- scroll becomes a timeline
A whole section is pinned to the screen while scrolling continues — what advances is inside the section: a sequence plays through, lines light up in turn, an image comes apart. It converts “how far have I scrolled” into “where is this timeline”, so the viewer keeps moving while the composition holds still.
When to use it
Use it on long pages that need to explain something: how a product works, a timeline, a step-by-step. It spends a lot of scroll distance — typically 1.5 to 2 viewports — on one demonstration, so at most two per page. Keep it off functional pages: when the thing a user wants is pinned in place, the page feels frozen.
Parameters
position: sticky · top 0 · scroll range 1.6× viewport height · inner progress 0→1 · linear, no easing
Recipe
Pinned scroll → position: sticky · top 0 · scroll range 1.6× viewport height · inner progress 0→1 · linear, no easing
One sentence for your AI
Build a pinned section: give the outer container a height of 1.6 viewport heights, and pin the inner layer with position: sticky; top: 0. Read how much of the outer container has scrolled past and map it to a 0→1 progress, then drive the inner timeline with it (playing a sequence, lighting up lines, taking an image apart). The mapping must be linear with no easing — the content should move exactly as much as the hand scrolls; easing decouples it from the finger.