What is a sticky header (position: sticky vs fixed)?
Definition A sticky header is a site header that stays visible at the top of the screen while the page scrolls, built with CSS position: sticky or position: fixed. Sticky elements scroll normally until they reach an offset such as top: 0 and then stick within their parent; fixed elements are taken out of the flow and pinned to the viewport. On a phone, sticky headers, bottom bars and banners together can cover a large share of an already small screen.
How to fix it: Sticky headers, cookie banners and pop-ups on mobile
position: sticky vs position: fixed
sticky | fixed | |
|---|---|---|
| Takes space in the layout | Yes | No: content slides under it unless you add padding |
| Sticks relative to | its nearest scrolling ancestor, within its parent | the viewport |
| Needs | an offset such as top: 0 | an offset |
| Common gotcha | stops working if an ancestor has overflow: hidden or auto | covers content; jumps when the keyboard opens |
position: sticky is usually the better choice for headers because it keeps its place in the document and needs no spacer. Safari needed -webkit-sticky only before version 13.
Example
.site-header {
position: sticky; top: 0; z-index: 10;
padding-top: env(safe-area-inset-top);
}
/* Keep anchor targets from hiding under it */
html { scroll-padding-top: 4rem; }scroll-padding-top makes in-page links and keyboard focus land below the header instead of under it.
Why sticky headers cause trouble on phones
- Screen space. A 390×844 phone with a 60 px header, a 70 px cookie bar and a 56 px bottom navigation has lost over a fifth of its height before showing any content, and in landscape far more.
- Large text. A header sized in
remgrows with text scaling and can take half the screen. - Hidden focus. WCAG 2.2 SC 2.4.11 Focus Not Obscured (AA) requires that a focused element isn't entirely hidden by sticky content.
- Notches and toolbars. Fixed bars at the edges need safe area insets on iPhone.
A common compromise is a header that hides on scroll down and reappears on scroll up, or a shorter header on small screens.
How MobileCheck checks it
MobileCheck flags sticky headers, bars and banners that together cover more than 25% of the screen, and dialogs or banners that cover the content on arrival when it couldn't close them. It checks again with the mobile menu opened and at 150% text, where headers most often grow too tall.