Advanced
Light up the active step
Each step of this story is taller than the scroller. The observer uses threshold: 0.5, so no step ever gets the class is-active.
Change the observer so that the step in the middle of the scroller is the only one with the class is-active: watch a band across the middle with rootMargin.
What Check tests
- Scrolled into step 1, only step 1 is active
- Scrolled into step 2, only step 2 is active
- Scrolling back up makes step 0 active again
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.