Building a Sticky Header with IntersectionObserver

The zero-height sentinel is the single most reliable way to detect when a header should switch from static to pinned, because it turns a scroll-position comparison into a one-time boundary crossing that IntersectionObserver already computes as part of layout. This walkthrough builds the technique from a bare DOM insertion up to a production-ready, accessible, leak-free implementation — the single-boundary special case of the broader scroll-driven effects and sticky headers toolkit.

Problem / Scenario Context

A common naive sticky-header implementation attaches a scroll listener to window, reads window.scrollY on every event, and compares it against a hardcoded pixel value or the header's cached offsetTop. This works until the page content changes height (a banner is dismissed, an ad loads, a font swap reflows text), at which point the hardcoded trigger point silently drifts out of sync with the header's actual position — the header pins too early or too late, and nobody notices until a support ticket arrives.

The fix is to stop hardcoding a pixel value entirely. Instead, mark the exact document position where pinning should begin with a real DOM element — the sentinel — and let the browser's own layout engine tell you when that position has scrolled past the viewport edge. If the page reflows and the sentinel moves, the observer automatically tracks the new position; there is no cached coordinate to go stale.

Mechanics Explanation

The sequence below shows the complete lifecycle of the technique, from initial page load through scroll-triggered pinning and back:

Two details matter here. First, observe() always delivers an initial notification asynchronously, so your callback will run once on load before any scrolling happens at all — guard against treating this as a real crossing if your logic assumes otherwise. Second, the actual pin decision is made entirely from entry.isIntersecting; there is no need to read entry.boundingClientRect or call getBoundingClientRect() yourself, because the browser has already resolved that geometry before the callback fires. The same single-boundary approach, applied to every section instead of one sentinel, is what powers scroll-spy navigation with IntersectionObserver.

Building It Step by Step

Step 1 — Insert the sentinel above the header

Place a zero-height, zero-width-impact element directly before the header in markup. It carries no visual styling beyond height: 0 so it never affects layout flow:

<div id="header-sentinel" aria-hidden="true" style="height:0;"></div>
<header id="site-header">
  <nav><!-- primary navigation --></nav>
</header>

aria-hidden="true" keeps the sentinel out of the accessibility tree — it is a pure layout marker, not content.

Step 2 — Observe the sentinel with a single instance

interface StickyHeaderController {
  disconnect(): void;
}

function initStickyHeader(
  sentinelId: string,
  headerId: string
): StickyHeaderController | null {
  if (typeof IntersectionObserver === 'undefined') return null; // SSR / unsupported guard

  const sentinel = document.getElementById(sentinelId);
  const header = document.getElementById(headerId);
  if (!sentinel || !header) return null;

  const observer = new IntersectionObserver(
    ([entry]: IntersectionObserverEntry[]) => {
      const isPinned = !entry.isIntersecting;
      requestAnimationFrame(() => {
        header.classList.toggle('is-pinned', isPinned);
      });
    },
    { rootMargin: '-1px 0px 0px 0px', threshold: 0 }
  );

  observer.observe(sentinel);
  return { disconnect: () => observer.disconnect() };
}

// Plain JS equivalent (no types)
function initStickyHeader(sentinelId, headerId) {
  if (!('IntersectionObserver' in window)) return null;
  const sentinel = document.getElementById(sentinelId);
  const header = document.getElementById(headerId);
  if (!sentinel || !header) return null;
  const observer = new IntersectionObserver(([entry]) => {
    const isPinned = !entry.isIntersecting;
    requestAnimationFrame(() => header.classList.toggle('is-pinned', isPinned));
  }, { rootMargin: '-1px 0px 0px 0px', threshold: 0 });
  observer.observe(sentinel);
  return { disconnect: () => observer.disconnect() };
}

Using -1px 0px 0px 0px rather than the default 0px avoids a subpixel edge case: at the exact zero boundary, some browser engines still report the sentinel as marginally intersecting, producing a single flicker frame where the class toggles twice in quick succession. The -1px offset guarantees a clean, unambiguous crossing.

Step 3 — Style both states in CSS

#site-header {
  position: sticky;
  top: 0;
  background: var(--surface-color, #fff);
  z-index: 50;
  transition: box-shadow 0.15s ease;
}

#site-header.is-pinned {
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.14);
}

@media (prefers-reduced-motion: reduce) {
  #site-header { transition: none; }
}

Note that position: sticky (not fixed) is doing the actual pinning here — it is the compositor-driven CSS mechanism, and it never causes the layout-shift problem that switching to position: fixed would. The observer's only job is to add a visual affordance (the shadow) once the header has genuinely engaged its sticky behavior.

Step 4 — Prevent layout shift if you must use position: fixed

If your design requires position: fixed instead of sticky (for example, to control stacking against other fixed elements), removing the header from flow will shift content upward by the header's height. Reserve that space with a spacer sized once on load:

const header = document.getElementById('site-header')!;
const spacer = document.getElementById('header-spacer')!;

function syncSpacerHeight(): void {
  spacer.style.height = header.classList.contains('is-pinned')
    ? `${header.offsetHeight}px`
    : '0px';
}

Call syncSpacerHeight() from the same requestAnimationFrame callback that toggles .is-pinned, and re-run it on a debounced ResizeObserver bound to the header, so a header height change (responsive nav collapsing to a hamburger menu, for instance) keeps the spacer accurate.

Step 5 — Accessibility pass

• Keep the <header> element as a single, stable landmark — do not swap it for a different tag or role when pinned, since that would confuse assistive technology navigating by landmark.
• Do not move focus or alter tab order when the pin state changes; only visual presentation should change.
• If in-page anchor links (#section-id) can land underneath the now-fixed header, add scroll-margin-top to target headings equal to the header's height, so keyboard-activated jumps do not tuck content behind the pinned bar:

h2[id] {
  scroll-margin-top: 72px; /* match the pinned header's height */
}

Step 6 — Teardown

// React
useEffect(() => {
  const controller = initStickyHeader('header-sentinel', 'site-header');
  return () => controller?.disconnect();
}, []);

// Vue 3
onMounted(() => { controller = initStickyHeader('header-sentinel', 'site-header'); });
onUnmounted(() => controller?.disconnect());

Always call disconnect() rather than relying on garbage collection to eventually reclaim the observer — for the underlying reasoning, see preventing memory leaks in long-running observers.

FAQ

Related

• Scroll-Driven Effects & Sticky Headers — parent guide covering the sentinel technique across all scroll-driven effects
• Scroll-Spy Navigation with IntersectionObserver — the multi-sentinel variant of this same technique
• IntersectionObserver API Deep Dive — full option reference for rootMargin and threshold
• Preventing Memory Leaks in Long-Running Observers — teardown discipline for long-lived pages

↑ Back to Scroll-Driven Effects & Sticky Headers