25 CSS Sticky Navigation

position: sticky is a hybrid: an element behaves as position: relative until its containing block scrolls past a threshold you set (typically top: 0), then it flips to position: fixed and pins to that edge — but ONLY within the bounds of its scroll container / containing block. When the container's bottom scrolls past, the sticky element scrolls away with it. position: fixed, in contrast, pins to the viewport permanently regardless of scroll position or containing block. That difference matters for real product work: a sticky header inside a scrollable article panel stops sticking when the article ends (correct — the header belongs to that panel), while a fixed header overlays every scroll surface on the page (often wrong — it fights modal overlays, embedded scrollers, and any nested scroll container). Sticky also has no layout side-effects when NOT stuck: the reserved space is honored, so content doesn't jump when the flip happens. Every demo in this collection uses position: sticky as the base primitive; fixed is only used for the mobile bottom tab bar (Demo 22) where viewport-pinning IS the intent.

This is the #1 sticky-navigation bug. If ANY ancestor between your sticky element and the scroll root has overflow: hidden, overflow: auto, or overflow: scroll, that ancestor becomes the sticky element's scroll container — and the sticky no longer sticks against the viewport. It sticks against that shorter ancestor, which usually means it doesn't visibly stick at all. Common triggers: a card wrapper with overflow: hidden to clip rounded corners, a modal body with overflow-y: auto, a Tailwind class like overflow-clip anywhere in the chain. Fix: remove the overflow rule from the ancestor (usually the fastest fix), OR move the sticky element outside the constrained ancestor, OR change the ancestor's overflow to overflow: visible. Debug: in DevTools, right-click the sticky element → Inspect → search up the ancestor chain for overflow:. Every ancestor is a suspect until proven visible. Every demo in this collection ships with the sticky element as a direct child of body or a scroll-clean container so the bug can't reproduce.

The user-friendly "smart" header pattern. Demo 07 is the reference. The core logic: track the previous scroll position in a variable, compare to current on every scroll event, if current > previous → scrolling down → add a hidden class that translates the header up out of view, if current < previous → scrolling up → remove the class. Two production refinements: (1) add a minimum scroll threshold (e.g. if (current < 100) return) so the header always shows in the first viewport, and (2) throttle with requestAnimationFrame so the listener never runs more than once per frame. The CSS side is one transform: translateY(-100%); transition: transform 200ms ease-out — no display: none, no height: 0, because those cause layout jank and destroy focus. Modern browsers also support scroll-timeline as a JS-free alternative, but Safari lags on that as of 2026 — the JS approach is universal today.

The iOS "safe area" gotcha. iPhone X and later have a home indicator strip at the bottom of the screen; content painted underneath it is invisible / untappable. CSS solves this with the env(safe-area-inset-bottom) function, which returns the OS-reported inset (34px on newer iPhones, 0 on Android and older devices). Demo 22 is the reference — its bottom tab bar uses padding-block-end: env(safe-area-inset-bottom, 0px) so the tabs sit ABOVE the home indicator, not under it. Two setup steps you can't skip: (1) add <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> to your HTML — WITHOUT viewport-fit=cover, iOS shrinks your layout to avoid the safe area and env() returns 0, so the padding does nothing. (2) Provide the fallback 0px in env(safe-area-inset-bottom, 0px) so browsers that don't support env() (very rare in 2026 — only pre-2020 Firefox / Edge) don't fall back to auto, which is invalid on padding. Android + desktop see zero extra padding; iOS with home indicator gets the correct offset. Zero conditional CSS, zero user-agent sniffing.

Scrollspy is the pattern where sticky-nav links auto-highlight as their target sections scroll into view — Demo 23 is the reference. The old jQuery approach used a scroll listener that measured every section's bounding rect on every event: correct, but wasteful. Modern approach: IntersectionObserver with rootMargin tuned to the sticky header's height. Set up one observer with threshold: 0 and rootMargin: '-80px 0px -60% 0px' (top negative offset = sticky header height; bottom -60% = only mark active when the section is in the top 40% of the viewport). Point it at every section. In the callback, on isIntersecting switch, update the nav link's aria-current="true" attribute and let CSS style off that — a[aria-current="true"] { color: var(--accent); border-bottom-color: currentColor }. Never classList.add('active'): aria-current is semantically correct, screen-reader-announced, and doubles as the style hook. Bonus: on nav-link click, smooth-scroll to the target with scrollIntoView({ behavior: 'smooth', block: 'start' }) guarded behind prefers-reduced-motion. The full pattern is 22 lines of JS.

Mega menus (Demo 16) are the highest-risk accessibility surface in a sticky navbar — they layer complex interactive content on top of the page and must remain keyboard, screen-reader, and focus-trap-safe. The reference recipe: (1) The top-level trigger is a real <button type="button"> with aria-expanded="false" and aria-controls="mega-panel-id". (2) The mega panel has role="region" + aria-labelledby pointing at the trigger's ID. (3) On open (click OR keydown Enter/Space), flip aria-expanded to true, remove hidden from the panel, move focus to the FIRST link inside the panel — NOT to the panel itself. (4) Escape key closes the panel AND returns focus to the trigger. (5) Click-outside detection via a bubbling document.click listener that checks !panel.contains(e.target) && e.target !== trigger. (6) Tab from the last link inside the panel closes the panel and moves focus to the next nav element after the trigger. Skip focus trap for mega menus — traps belong to modals; menus should be exit-easy via Escape or Tab. Every interactive element inside the panel needs a visible focus ring (:focus-visible). Grid layout inside the panel needs proper heading structure (<h3> per column) so screen readers can navigate by heading.

The CSS ports unchanged — every .sn-NN selector, every keyframe, every custom property is framework-agnostic. What changes is where the JS lives. React: wrap the scroll listener in useEffect(() => { const cleanup = init(ref.current); return cleanup }, []) so it registers on mount and removes on unmount — never re-register on every render. Vue 3: onMounted(() => init(ref.value)) + onBeforeUnmount for cleanup. Svelte: onMount(() => { init(el); return cleanup }). Next.js App Router: mark the sticky-nav component with 'use client' — sticky positioning is a browser primitive, no SSR value. Tailwind: the class attribute on each demo can be mechanically translated (sticky → sticky, top: 0 → top-0, z-index: 40 → z-40, backdrop-blur → backdrop-blur-md); custom-property tokens become CSS vars in your @theme block. Bootstrap 5: the built-in .sticky-top class covers the base case; layer these demos' custom behaviours on top. Every demo's JS is written as a plain init function (usually 15-40 lines) — strip the IIFE wrapper and call from your framework's lifecycle hook. Zero framework lock-in.