Sticky scroll story

Use it for

• Explaining a three or four step product flow on a landing page
• Showing what the product does next to the words that describe it

Avoid

• More than five steps, where the scroll gets long and tiring
• Content people need to compare side by side

How it works

One passive scroll listener on the container runs a requestAnimationFrame update that finds the last step whose top has crossed a reading band (the middle of the container, or the area below the stage when stacked). Only a change of step sets state, which writes data-step on the stage. CSS does the rest: the matching panel fades and rises in, and transition delays on its rows play a short detail sequence. A container query stacks the stage above the text on narrow widths.

Accessibility

The stage is aria-hidden because the steps carry the same information as text. Reduced motion removes the movement and the price flash, so panels just switch. The container is focusable for keyboard scrolling.