← All elements
<div class="doc"><aside><b>Contents</b><a href="#x">Intro</a><a href="#x">Setup</a><a href="#x">Usage</a></aside><main><h4>Intro</h4><p>The list on the left stays put while you scroll.</p><h4>Setup</h4><p>No libraries, no build, just a few lines of CSS.</p><h4>Usage</h4><p>Drop it next to any long article.</p><h4>More</h4><p>Keep scrolling to see it hold its place.</p></main></div>About this layout
A two-column layout where the contents list sticks in view while the article scrolls beside it, using position: sticky.
How it works
A flex container holds a narrow aside and the article column. The aside uses position: sticky with top: 0 and align-self: flex-start, so it stays in view while the article scrolls inside the same scrolling container. Sticky only works because the aside has a scrolling ancestor and its own height is smaller than the container.
Ways to customise it
- Change the top value to leave room for a fixed header.
- Edit the link colours in the aside.
- Make the aside wider by changing its min-width.
Good to know
Sticky positioning is supported everywhere current. A table of contents should use real anchor links with matching ids so it works for keyboard users and for search engines.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.