data-sticky

Make header or footer elements stick to the viewport edge on scroll. CSS-only — no JavaScript required.

Overview

Add data-sticky to a <header> or <footer> element to pin it to the viewport edge as the user scrolls. Headers stick to the top; footers stick to the bottom.

This is a CSS-only attribute — no JavaScript required. It sets position: sticky, z-index: 100, and background: var(--color-surface) to ensure the element stays visible above scrolling content.

Usage

Sticky Header

Pin a site header to the top of the viewport:

<header data-sticky> <strong>Brand</strong> <nav class="horizontal pills" aria-label="Site navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Docs</a></li> </ul> </nav> </header>

Sticky Footer

Pin a footer to the bottom of the viewport:

Supported Elements

Element	Sticks to	CSS Applied
`<header data-sticky>`	Top of viewport	`position: sticky; inset-block-start: 0`
`<footer data-sticky>`	Bottom of viewport	`position: sticky; inset-block-end: 0`

Backdrop Blur Enhancement

For a polished effect, add backdrop blur so content is visible behind the sticky header:

header[data-sticky] { backdrop-filter: blur(8px); background: oklch(from var(--color-surface) l c h / 0.9); }

Accessibility

Sticky headers should not obscure focused content when users navigate with keyboard
Ensure sufficient contrast between the sticky element and page content scrolling beneath
Consider scroll-padding-top on the scroll container to offset anchor links below the sticky header

<header> — Element that supports data-sticky for top positioning
<footer> — Element that supports data-sticky for bottom positioning
<table> — Uses data-sticky="header|column|both" for sticky rows and columns (different attribute)
Navbar patterns — Sticky header recipes with backdrop blur