Sticky Header

What it does

Implements stable, accessible sticky headers with correct anchor offsets and no layout shift.

When to use it

Use for persistent navigation, shrink/hide-on-scroll headers, or fixing anchor and stacking bugs.

Problems it prevents

Stops sticky headers that jump, overlap content, or break anchor links to in-page sections.

Typical workflow

1. Reserve height to prevent layout shift
2. Set correct scroll-padding for anchors
3. Implement shrink/hide behaviour if used
4. Verify no stacking conflicts

Example output

A header that stays stable on scroll with anchor links that land in the right place, not hidden underneath it.

What's included

1. 01
   The complete prompt

   The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

2. 02
   Install walkthrough

   Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

3. 03
   Use notes

   How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Works well with

• FocusedResponsive Mobile Navigation

  Preserves navigation hierarchy, focus and touch behaviour across mobile, tablet, desktop and assistive technology.

• FocusedBack to Top

  Adds a context-aware, accessible return-to-top control that only appears once it's actually useful.

• FocusedDark Mode

  Implements accessible light, dark and system-aware themes with durable tokens and a no-flash startup.