Vanilla Breeze

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:

Sticky Footer

Pin a footer to the bottom of the viewport. Unlike position: fixed, a sticky footer is part of the normal document flow — it sticks to the bottom while you scroll but does not overlay content. Ideal for action bars, persistent CTAs, and form submit rows.

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:

Smart Sticky System

Vanilla Breeze provides a coordinated sticky system activated by adding data-sticky to the <html> element. This gates all sticky behavior behind a single toggle, following the principle that sticky is an enhancement, not a default.

Three Rules

  1. Opt-in: Baseline is non-sticky. Elements declare sticky intent with data-sticky or data-layout-sticky, but only activate when the system is enabled on <html>.
  2. Viewport constraint: Sidebars are always constrained to the remaining viewport height below the header, with inner scrolling when content overflows.
  3. Coordination: A shared --sticky-offset custom property flows the header height to all subordinate sticky elements automatically.

Enabling the System

Or toggle via JavaScript:

The VB settings panel includes a Sticky Navigation toggle in the Layout section that manages this automatically with localStorage persistence.

Offset Coordination

When enabled, the sticky manager measures the header height and sets --sticky-offset on :root. All sticky sidebars and components reference this variable so they stack correctly below the header. The system also sets scroll-padding-block-start so anchor links land below the sticky header.

Viewport Constraint

Sidebar elements with data-layout-sticky are always constrained to max-height: calc(100dvh - var(--sticky-offset) - var(--sticky-gap)) with overflow-y: auto. This ensures the sidebar fills exactly the remaining viewport below the header and gains inner scrolling when its content overflows. Combined with align-self: start, this is the pattern that keeps sticky positioning reliable regardless of content length.

Mobile Behavior

On viewports narrower than 48rem, sticky headers are automatically disabled to preserve screen space. Sidebars collapse to drawers or stack layouts on mobile, so their sticky behavior does not apply.

A back-to-top button provides quick return-to-top navigation when sticky is off.

CSS Custom Properties

Property Default Description
--sticky-offset 0px Set by sticky manager to the header height. Used by all subordinate sticky elements.
--sticky-gap var(--size-2xs) Breathing room between the sticky header and subordinate sticky elements (sidebars, TOC). Override on :root or per-theme.
--z-sticky 100 Z-index for subordinate sticky elements (sidebars, page-toc, footer).
--z-sticky-header 200 Z-index for the sticky header. Higher than other sticky elements so dropdowns and overlays render above the page-toc.

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
  • The system automatically sets scroll-padding-block-start to offset anchor links below the sticky header

Related

  • <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)
  • data-page-layout — Page layouts with data-layout-sticky support
  • Navbar patterns — Sticky header recipes with backdrop blur
↑