Skip to content
tileio

Menu

11 layers · 3 free

Sticky navbars and headers that respond to scroll

A sticky header takes screen height on every page, so these shrink, step aside while you read and return the moment you scroll up, or tell you where you are. Each is a complete header: position: sticky or fixed does the work, and a few lines of script handle the scroll logic.

On phones, prefer the ones that hide or shrink on scroll (Smart Sticky Nav, Pill Nav) or the dock at the bottom edge. On long documents, the section-aware ones (Tab Nav, the sidebar rail, the breadcrumb trail and the table of contents) do more than a header can.

The 11 layers, in order

  1. Tightens and frosts after 40 px, slides away while you scroll down and bounces back on the first scroll up, with a progress hairline.

  2. A full-width bar that morphs into a floating glass pill after 80 px of scroll, with a highlight sliding under the hovered link.

  3. Splits along the boundary between a dark and a light section so each part of the bar reads against what is under it.

  4. Product-page tabs anchored to the sections below; the indicator follows the section in view and a line shows page progress.

  5. A sticky header whose Product and Solutions links open wide panels with a preview pane, on hover or focus, closed by Escape.

  6. A spare header with a ⌘K button that opens a command palette of grouped, keyboard-driven results.

  7. A dock pinned to the bottom of the viewport; tiles swell under the pointer and a dot marks the section you are in.

  8. A slim rail on the left edge with one segment per chapter, each filling as you read through it.

  9. A sticky breadcrumb for long docs that types new crumbs as you go deeper and erases them on the way back.

  10. A sticky table of contents beside an article, with an accent bar sliding to the heading in view.

  11. A reading-progress bar for the edge of a sticky header, driven by a scroll timeline with a fallback for older browsers.

Browse the full catalogue: Sections · Elements

Related collections

All collections