Sticky Table of Contents with Scrolling Active States

Say you have a two-column layout: a main column with content and a sidebar. Say it has a lot of content, with sections that requires scrolling. The 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.

Bramus Van Damme has a nice tutorial on all this, starting from semantic markup, implementing most of the functionality with HTML and CSS, and then doing the last bit of active nav enhancement with JavaScript.

For example, if you don’t click yourself down to a section (where you might be able to get away with :target styling for active navigation), JavaScript is necessary to tell where you are scrolled to and to highlight the active navigation. That active bit is handled nicely 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!

vsync

# January 31, 2020

I’ve made a Codepen of such a thing (last year), in React, using custom hooks which allows similar to what is described, and much more!
very flexible, solid & performant:

At first it also seemed that IntersectionObserver would be good fit, but very quickly I saw it does not perform well nor reliable for what I had in mind. now it is perfect.

perija

Permalink to comment# March 5, 2020

Hi vsync, you did a good job. I’m wondering, do you have this example on github?

Chris Coyier

# May 11, 2021

Davor Suljic with a clever solution (no JavaScript!) after the buzzer:

It is a solution without use of JavaScript. Each <section> was given background patch just below the corresponding link in the sidebar navigation. For example:

section:nth-of-type(1) {
  background: right 2rem top 2rem / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
``background-attachment: fixed;
}

background-attachment: fixed; makes the patch mark the link (with transparent background) as long as the section is viewed. It creates a visual of updating the active state of the navigation.

There is some manual work to place all section backgrounds on the right spot but I think it is worth it.

Comments