Sticky header

Also called sticky navbar, sticky nav, or fixed header

A top bar that stays pinned to the top of the screen while the page scrolls underneath it, so navigation is always one click away.

import { useState } from 'react';
import { useMotionValueEvent, useScroll } from 'motion/react';

const LINKS = ['Product', 'Pricing', 'Docs'];

// Add `scroll-pt-16` to <html> so anchor links don't land under the header.
export function SiteHeader() {
  const { scrollY } = useScroll();
  const [scrolled, setScrolled] = useState(false);
  useMotionValueEvent(scrollY, 'change', (y) => setScrolled(y > 8));

  return (
    <header
      data-scrolled={scrolled || undefined}
      className='sticky top-0 z-50 flex h-16 items-center justify-between border-b border-transparent bg-background px-6 transition-[background-color,border-color,box-shadow] duration-200 data-scrolled:border-border data-scrolled:bg-background/80 data-scrolled:shadow-sm data-scrolled:backdrop-blur-md'
    >
      <a href='/' className='font-semibold'>
        Tripmate
      </a>
      <nav className='flex gap-6 text-sm text-muted-foreground'>
        {LINKS.map((label) => (
          <a
            key={label}
            href={`#${label.toLowerCase()}`}
            className='hover:text-foreground'
          >
            {label}
          </a>
        ))}
      </nav>
    </header>
  );
}

What is Sticky header?

A sticky header keeps the logo, navigation, and main action in view as people scroll. Many sites add a small change once the page moves: a shadow or border appears, the background turns semi-transparent with a blur, or the bar shrinks a little. That change shows that content is sliding under the header.

In CSS it takes two lines: position: sticky and top: 0. The header stays in the normal page flow until it reaches the top of the screen, then pins there. position: fixed also pins it, but takes it out of the flow, so the page needs extra top padding to keep the header from covering the first lines of content.

Keep it short, about 56 to 64px, since it takes space permanently, especially on phones. If sticky seems to do nothing, check the parents: an ancestor with overflow: hidden or overflow: auto becomes the box it sticks inside. Give the header a z-index so cards and images pass beneath it, and set scroll-padding-top so in-page links do not land under it.

Often confused with

Scroll pinning: Scroll pinning holds a section in place for a stretch of scrolling while an animation plays, then lets it go. A sticky header stays pinned for the whole page.

All terms