Sticky Sidebar — position:sticky Sidebar HTML CSS JS

A sticky sidebar — one that scrolls with the page until it reaches the top, then stays pinned while the main content keeps moving — is the standard layout for documentation, long articles, and product pages. This snippet builds it with modern position: sticky (no scroll-listener hacks) and adds a table of contents that highlights the section you're currently reading, in plain HTML, CSS, and vanilla JavaScript.

Sticky with one CSS property

The sidebar column (.ss-aside) is set to position: sticky; top: 20px. That's the entire mechanism: the column scrolls normally until its top hits 20px from the viewport top, then it sticks there while the rest of the page scrolls past — and unsticks naturally when its container scrolls away. position: sticky replaced the old approach of listening to scroll and toggling position: fixed with manual offset math; it's smoother, jank-free, and a fraction of the code. The key requirement is that the sticky element's parent be tall enough to scroll within, which the grid layout provides.

Grid layout with top alignment

The page is a two-column grid (1fr 250px) with align-items: start, which is essential: without it, grid would stretch the sidebar column to the full height of the main content, and a sticky child can't stick inside a parent that's exactly as tall as the scroll area. Starting the items at the top lets the sidebar column be only as tall as its content, giving the sticky wrapper room to travel.

Scroll-spy with IntersectionObserver

The table of contents highlights the active section using an IntersectionObserver rather than scroll-position math. Each section is observed with a rootMargin that defines a "reading band" near the top of the viewport (-20% 0px -70% 0px); whichever section enters that band becomes active, and its TOC link lights up. Using IntersectionObserver is both more efficient (the browser does the work, off the main thread) and more accurate than computing offsets on every scroll event — the modern way to build scroll-spy.

Smooth in-page navigation

Clicking a TOC link smooth-scrolls to its section with scrollIntoView({ behavior: 'smooth' }), and scroll-margin-top on each section ensures the heading lands below the sticky offset rather than flush against the top. Together with the active-link highlight, the TOC both navigates and orients.

Responsive collapse

On narrow screens the grid collapses to one column, the sidebar becomes static (un-sticky), and the secondary CTA card hides — because a sticky sidebar makes no sense in a single-column phone layout. This keeps the reading experience clean on mobile while delivering the full sticky-and-spy behaviour on wider screens. It's a complete, drop-in reference for the sticky-sidebar pattern behind every docs site.