Sticky Header

Pin navigation to the top as the user scrolls past it.

AI Prompt
Create a Sticky Header pattern for an AI-generated interface. It should help with pin navigation to the top as the user scrolls past it. Use a restrained black, white, and gray visual style, strong hierarchy, and product-grade spacing. The interaction should feel persistent, practical, and easy to scan.
Negative Prompt
Do not make the sticky header flashy, noisy, over-animated, or decorative for its own sake. Avoid random glow, heavy gradients, excessive borders, oversized type, unclear hierarchy, and generic SaaS filler.
Tokens
{
  "id": "sticky-header",
  "category": "interactions",
  "trigger": "scroll past",
  "target": "sticky header",
  "duration": "160ms",
  "easing": "ease-out",
  "feeling": [
    "persistent",
    "practical",
    "precise"
  ],
  "palette": [
    "black",
    "white",
    "gray"
  ]
}

Usage notes

Short guidance for humans and AI tools before copying the pattern.

Use Sticky Header when you need pin navigation to the top as the user scrolls past it. It works best when the interface needs clarity before spectacle.

Do not make the sticky header flashy, noisy, over-animated, or decorative for its own sake. Avoid random glow, heavy gradients, excessive borders, oversized type, unclear hierarchy, and generic SaaS filler.

Create a Sticky Header pattern for an AI-generated interface. It should help with pin navigation to the top as the user scrolls past it. Use a restrained black, white, and gray visual style, strong hierarchy, and product-grade spacing. The interaction should feel persistent, practical, and easy to scan.