A Sticky Table of Contents Sidebar for Articles

I have a table of contents (ToC) at the beginning of each of my long blogposts, but till now, the ToC has shown up inline in the posts, and scrolled away as you read it. For better navigation, I recently added a sidebar ToC. It shows up only on large screens; small screens still display the inline ToC. See it in action in one of my posts. I’ve extracted the code as standalone snippets and I present the same in this note. This post was originally published on abhinavsarkar.net. The HTML# The first step is to add the ToC as HTML in the web page. We use a simple <ol> wrapped in <nav> for this purpose. The body of the post resides in the <section class="body"> element. In the example below, notice that there are two identical copies of the ToC <nav>: one outside and just before the post body inside an <aside> element, and one inside and at the beginning of the post body. The <aside> element must be a sibling before the post body, because the CSS that hides the inline copy works off that…

Commenting on Bubbles has been removed. Why? If you want to talk about this post, write to the author, use the comments on their blog if it has them, or reply with a "RE:" post on your own blog. Suggestions? feedback@bubbles.town