Sticky table of contents

I had a fun time designing and prototyping this sticky table of contents for my longer blog posts. You can see it in action in my deep work guide to Slack:

https://www.arun.is/blog/slack-guide/

In the process of designing it, I had a few constraints in mind:

1. It should be clearly separated from the content of the blog post while being consistent with the rest of my site design.
2. The active state should be very obvious while being unobtrusive.

I went through around 15 different variations before settling on this one. Here were some of the challenges and highlights:

1. When scrolling, deciding which item to highlight was a challenge. There are some edge cases that are hard to solve. For example, when at the end of the document, but multiple sections are visible, which one do we highlight? I did some research on what industry leaders are doing in order to come up with a solution I like.
2. I made the hover state and active state very similar, but added the blue dot for the active state. This made both very unobtrusive, but still visually separated them.
3. Animating all the color changes and using smooth scrolling when someone clicks an item in the table contents adds a level of fluidity.
4. I set up my static site generator (Gatsby) to automatically generate this table of contents for select blog posts.