A sticky chart and an observer that finds the active step
The code scrolls its own box; a reader would use the mouse or a finger. Step 1 is skipped on the way from 0 to 2, because an instant jump does not pass through it.
Scrollytelling keeps one chart fixed on screen while text steps scroll past it, and each step changes the chart. Two browser features do the whole job: position: sticky holds the chart, and IntersectionObserver tells you which step is in the middle of the screen.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write activeIndex(tops, bottoms, mid) that returns the index of the step whose box contains mid (the y position of the band's centre), or -1 when none does. Test it with a gap between steps, with the midpoint exactly on a boundary, and with no steps.
Change the first example so the active step is also written as the figure's aria-label, for example Average rides per day by season, Summer highlighted. Say what you would also do for readers who cannot see the highlight.
Explain it without notes
How does position: sticky keep a chart on screen, and what three things stop it from working?
How does an IntersectionObserver band across the middle of the screen find the active step?
Why does threshold: 0.5 fail for tall steps?
Why can the active step change when nobody scrolls, and how must your code deal with it?
Preview
Console
Nothing logged yet.Expected console output
active step: 0 Winter
active step: 2 Summer
active step: 3 Autumn
active step: 1 Spring
chart still at the top of the scroller: true