Sticky Sidebar
A sidebar that sticks to the viewport as the user scrolls past it, using position: sticky inside a scrollable layout container.
CSS
Intermediate
5 min read
Sticky Sidebar Pattern
Example
.layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 2rem;
align-items: start; /* Required for sticky to work */
}
.sidebar {
position: sticky;
top: 80px; /* Distance from top of viewport when sticking */
max-height: calc(100vh - 80px);
overflow-y: auto;
}
.content {
/* Scrolls normally */
} Pro Tip
align-items: start on the grid parent is critical — stretch (the default) makes sticky ineffective by expanding the element.