Sticky section headers
Scroll the list. Each letter sticks at the top while its section passes, then the next section pushes it up. Reading positions forces a layout, so the values are exact straight after setting scrollTop.
scroll-snap makes a scroll container settle on chosen items, position: sticky keeps headers in view while their section scrolls, and scroll-driven animations (animation-timeline: scroll() and view()) tie an animation's progress to the scroll position instead of to time.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a vertical list .feed (height 300px) whose .post children each fill the height and snap to their start, never skipping a post on a fast flick.
Write the CSS for a page whose <header> is 64px tall and fixed, so that jumping to #pricing doesn't hide the section heading under the header.
Add a reading-progress bar that follows the whole page's scroll, only in browsers that support scroll-driven animations.
Explain it without notes
Which properties make a scroll container snap, and what is the difference between mandatory and proximity?
Why might position: sticky not work, and how do you debug it?
What is a scroll-driven animation, and how do scroll() and view() timelines differ?
Why are scroll-driven CSS animations smoother than effects built on the scroll event?
Preview
Console
Nothing logged yet.Expected console output
scrolled 60px: header A is at 0
inside section B: header A is at a negative offset (pushed away)
inside section B: header B is at 0