← All Examples

Sticky Sidebar

A sidebar that sticks to the viewport while scrolling using position: sticky.

Published June 2, 2026

Demo

Introduction

This sidebar uses position: sticky to stay in view while the content area scrolls. Scroll down to see it in action.

Installation

No dependencies required. Copy the CSS and HTML into your project. It works with any layout.

Usage

Add position: sticky; top: 0 to any element inside a scrolling container to pin it to the top.

API Reference

The sticky behavior respects top, bottom, left, and right offset values for precise positioning.

Examples

Common uses include sticky table headers, side navigation, announcement banners, and floating action buttons.

HTML

<div class="layout">
  <nav class="sticky-nav">
    <!-- nav links -->
  </nav>
  <main class="content">
    <!-- scrollable content -->
  </main>
</div>

CSS

.layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  height: 260px;
  overflow-y: auto;
}

.sticky-nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: fit-content;
}

How it works

position: sticky places an element in normal flow but makes it stick to a specified position when it would otherwise scroll off. The sidebar uses position: sticky; top: 0 inside a scrollable container. The key requirement is that the scrolling ancestor must have a finite height — here the layout wrapper uses overflow-y: auto and a fixed height. align-self: start is needed on the sidebar so it doesn't stretch to the grid row height.