OneTaskBy Tim King · Updated
Sticky Header Generator
Hide on Scroll and Shrinking Header in CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Sticky Header works
A sticky header keeps your logo and navigation at the top of the screen while the page scrolls. This sticky header generator can hide the header on the way down and bring it back on the way up, shrink it once scrolling starts, or keep it fixed. Scroll inside the preview to try it.
The header uses position: sticky with top: 0, which keeps it in normal page flow until it reaches
the top of the window and then holds it there. Unlike position: fixed, nothing needs a matching
top margin on the page, and the header never covers the start of your content.
How the sticky header reacts to scrolling
A single passive scroll listener compares the scroll position with the previous one. Once the page has scrolled, the header gets a soft shadow so it separates from the content under it. In hide mode it slides up when the visitor scrolls down and comes back as soon as they scroll up. In shrink mode the padding tightens so the header takes less space.
Keyboard users
A hidden header comes back whenever something inside it has focus, through :focus-within, so
tabbing to a navigation link always reveals it. Visitors who prefer reduced motion get the same
behaviour without the slide and shrink animation.
FAQ
Why is my sticky header not sticking?
The usual cause is a parent element with overflow: hidden, overflow: auto or a fixed height,
which turns that parent into the scroll container. Sticky then only works inside it. Remove the
overflow from the header's ancestors or move the header to be a direct child of the body.
Should I use a hide on scroll header on mobile?
It is a good fit, because it gives the full screen to the content while reading and brings the menu back the moment the visitor scrolls up to look for it. Always visible headers take a large share of a small screen for the whole visit.
How do in-page anchor links avoid hiding under the header?
Add scroll-padding-top to the html element, equal to the header height, for example
html { scroll-padding-top: 4.5rem; }. The browser then stops the scroll that far below each anchor
so headings are not covered.
Does the scroll listener slow the page down?
No. It is marked passive, so it never delays scrolling, and it only toggles two classes. The animation itself uses transform and padding transitions, which are cheap to run.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.
Mobile Menu
Build a responsive hamburger menu with an animated icon and panel.
Announcement Bar
Build a dismissible top-of-page announcement bar with rotating messages.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Reading Progress Bar
Make a scroll progress bar for articles and copy the CSS and JS.