Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
data-sticky
Activate viewport-aware sticky-positioning coordination. Set on to enable the system; the StickyManager keeps a --sticky-offset custom property in sync with the actual sticky-header height so all sticky elements (sidebar, TOC, headings) line up correctly.
Overview
The data-sticky attribute on <html> turns on VB's sticky coordination system. Behind it, StickyManager measures the live sticky-header height and writes it to --sticky-offset on :root. Every sticky sidebar, TOC, scroll-padding setting, and "scroll into view" behavior reads that variable, so they all line up correctly without you hardcoding a header offset anywhere.
On other elements, data-sticky marks the element as a sticky participant. The first <header> in the document picks it up automatically when the system is active; other elements opt in explicitly.
Usage
Activate the system
<html lang="en" data-sticky> <body> <header> <!-- Auto-marked data-sticky by StickyManager --> </header> <main>...</main> </body></html>Mark a custom element as sticky
<body> <header data-sticky>...</header> <aside data-sticky class="page-toc"> <!-- Constrained by max-block-size: calc(100dvh - var(--sticky-offset) - var(--sticky-gap)) --> </aside></body>Two roles
| On | Effect |
|---|---|
<html data-sticky> |
Enables the system. StickyManager.init() runs; auto-applies data-sticky to the first <header> if not already present; sets up resize + fonts.ready + toggle listeners to keep --sticky-offset current. |
<header data-sticky> |
Header opts in (or is auto-applied). Becomes position: sticky at top: 0; its height is what StickyManager measures. |
<aside data-sticky> / <nav data-sticky> |
Marked as a sticky region. CSS in src/utils/sticky.css applies position: sticky with top: var(--sticky-offset) and a height constraint so the region can scroll independently if its content exceeds the viewport. |
<footer data-sticky> |
Sticky-to-bottom variant; styles in src/native-elements/footer/styles.css. |
The CSS variables it provides
| Variable | Set by | Use for |
|---|---|---|
--sticky-offset | StickyManager (px) | Top offset for any other sticky element so it stays below the header. |
--sticky-gap | theme / authors | Gap to leave above the bottom of the viewport when constraining sticky region height. |
Pattern: a sticky aside with self-scroll
aside[data-sticky] { position: sticky; inset-block-start: var(--sticky-offset, 0); max-block-size: calc(100dvh - var(--sticky-offset) - var(--sticky-gap, 1rem)); overflow-y: auto;}What triggers a re-measure
- Window resize —
resizelistener onwindow(passive). - Fonts loaded —
document.fonts.readyresolves and triggers a re-measure (header height often changes once webfonts arrive). - Toggle events — any
<details>opening / closing inside the header. - Initial mount — immediate measure plus a follow-up in the next
requestAnimationFrameafter layout settles.
Composition
<page-toc>— the TOC sidebar reads--sticky-offsetfor its own positioning.data-page-layout— theapp-shellanddashboardtemplates assume a sticky header.scroll-padding-block-starton:root— set tovar(--sticky-offset)so anchor-link jumps land below the sticky header.- Print stylesheet —
src/utils/print.cssdisables sticky behavior automatically.
When NOT to use
- Pages with no sticky chrome — the system measures and sets variables every resize; that's cheap but pointless if nothing's sticky.
- Inside scrollable subregions —
data-stickyon a child of an overflowing container won't measure correctly; coordinate with the parent's scroll state instead.