Back to Examples

CSS Sticky Headers

If you searched css sticky header or navbar sticky, position:sticky sticks within its parent scroll container until overflow ends. Combine with top, z-index, and backdrop blur.

Stays at top while page content scrolls.

Scroll area
Sticky header

Scroll me

More content

Even more

End

Scroll inside the gray box.

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

2. top offset below banner

Stick below a promo bar with top:3rem.

Offset header
Promo
Nav
Content…

Header sticks under banner.

.nav { position: sticky; top: 2.5rem; }

3. Blurred sticky bar

Semi-transparent bar with backdrop-filter.

Glass sticky
Glass sticky

Blur content scrolling underneath.

.bar {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
}

Frequently asked questions

Why is sticky not working?
Parent with overflow:hidden/auto creates a containing scrollport; sticky sticks inside it only.
sticky vs fixed?
sticky flows in document until stick point; fixed leaves flow and covers viewport.
Safe area on iOS?
Add padding-top: env(safe-area-inset-top) on fixed/sticky headers.