Sticky Table of Contents Using CSS & JavaScript: Complete Guide

A sticky table of contents using CSS and JavaScript combines two separate jobs: CSS's position: sticky keeps the navigation pinned in view while scrolling, and JavaScript's IntersectionObserver highlights which section is currently active. Neither piece alone gives the full experience readers expect from documentation sites and long-form articles.

01Sticky Table of Contents Using CSS: The Foundation

Position sticky behaves like a relatively positioned element until a specific scroll threshold is reached, after which it locks into place like position: fixed, but only within the bounds of its parent container.

Polypane's guide is refreshingly honest about the catch: sticky can be surprisingly tricky to work with because it comes with real constraints, and you can end up in a situation where an element should be stuck, but it just silently isn't. W3Tweaks' guide confirms the same experience: add position: sticky and top: 0 to a header and nothing happens, no error, it just silently refuses to stick.

02The Basic Sticky CSS

Here's the minimal CSS to pin a table of contents sidebar in place while the rest of the page scrolls past it.

/* The sidebar sticks once it reaches 24px from the top */
.toc-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: start;
}

03Handling a TOC Taller Than the Viewport

A long table of contents can exceed the visible screen height, getting clipped instead of scrolling with the page. Setting max-height and overflow-y: auto on the sticky container, as shown above, lets the TOC itself scroll internally once it runs out of vertical room.

04Adding JavaScript Scrollspy Highlighting

This is where the IntersectionObserver pattern covered in our scrollspy guide plugs directly into a sticky sidebar, watching each heading and toggling an active class on the matching TOC link.

function highlightStickyToc(contentSelector, tocSelector) {
  const headings = document.querySelectorAll(`${contentSelector} h2, ${contentSelector} h3`);
  const tocLinks = document.querySelectorAll(`${tocSelector} a`);

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        tocLinks.forEach(link => link.classList.remove('active'));
        const activeLink = document.querySelector(
          `${tocSelector} a[href="#${entry.target.id}"]`
        );
        if (activeLink) activeLink.classList.add('active');
      }
    });
  }, { rootMargin: '0px 0px -70% 0px' });

  headings.forEach(heading => observer.observe(heading));
}

highlightStickyToc('.article-content', '.toc-sidebar');

05The New CSS-Only Approach (2026)

Una Kravets' writeup covers a genuinely new option: the scroll-target-group CSS property, paired with the :target-current pseudo-class, lets the browser handle active-link tracking natively, no JavaScript, no IntersectionObserver, no scroll listeners at all.

ol.toc-sidebar {
  scroll-target-group: auto;
}

.toc-sidebar a:target-current {
  color: #4a9e24;
  font-weight: 700;
}

/* Feature-detect, since browser support is still limited */
@supports (scroll-target-group: auto) {
  .toc-sidebar ol { scroll-target-group: auto; }
}

06Approach Comparison

A quick reference for choosing between the traditional and emerging approaches.

07Implementation Checklist

A short list to confirm before shipping a sticky table of contents to production.

08Common Questions