Tall steps and a resized scroller
Two failures with no error: a threshold that never fires for tall steps, and an active step that changes when the window is resized. The sweep scrolls each step by 140 px past its top, so the middle of the scroller is inside 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
threshold 0.5, tall steps -> steps reported: none
middle band, tall steps -> steps reported: 0, 1, 2
scroller 220 px tall, active step: 0
scroller 320 px tall, active step: 1 (nobody scrolled)