Sticky Table of Contents with Scrolling Active StatesJanuary 30, 2020
Say you have a two-column layout: a main column with content. Say it has a lot of content, with sections that requires scrolling. And let's toss in a sidebar column that is largely empty, such that you can safely put a
position: sticky; table of contents over there for all that content in the main column. A fairly common pattern for documentation.
For example, if you don't click yourself down to a section (where you might be able to get away with
IntersectionObserver, which is, like, the perfect API for this.
Here's that result:
It reminds me of a very similar demo from Hakim El Hattab he called Progress Nav. The design pattern is exactly the same, but Hakim's version has this ultra fancy SVG path that draws itself along the way, indenting for sub nav. I'll embed a video here:
That one doesn't use
IntersectionObserver, so if you want to hack on this, combine 'em!