A sticky header keeps navigation at the top while scrolling. +22% pages per session.
Sticky vs fixed vs static
Static โ classic. Fixed โ always. Sticky โ becomes fixed after scrolling.
CSS
position: sticky; top: 0; z-index: 100.
Smart sticky
Show on scroll up, hide on scroll down.
Height
60-80px desktop, 50-60px mobile.
Logo and nav
Logo left, nav center/right, CTA right corner.
Search
Search icon in the sticky bar.
Mobile
Touch targets. Burger menu.
Transition
Box-shadow on activation.
Hero and sticky
Activate after the hero.
Mistakes
Too tall, low z-index, transparent background, weak on mobile.
Performance
requestAnimationFrame, debounce, Intersection Observer.
Accessibility
Skip to main content. Keyboard navigation.
Sticky footer
Mobile sticky CTA is useful.
Sayt.uz
70px desktop, 56px mobile. Smart sticky. Pages per session 2.8 (was 2.1 without sticky).