📌
Веб-сайты

Sticky header: пользователю всегда доступна навигация

11.04.2027
← Все статьи

Sticky header — навигация остаётся вверху при скролле. +22% pages per session.

Sticky vs Fixed vs Static

Static — классика. Fixed — всегда. Sticky — становится fixed после скролла.

CSS

position: sticky; top: 0; z-index: 100.

Smart sticky

Scroll up — показать. Scroll down — скрыть.

Высота

60-80px desktop, 50-60px mobile.

Логотип и навигация

Logo слева, nav центр/право, CTA правый угол.

Search

Search icon в sticky.

Mobile

Touch targets. Burger menu.

Transition

Box-shadow при активации.

Hero и sticky

После hero активация.

Ошибки

Высокий header, низкий z-index, прозрачный фон, plain mobile.

Performance

requestAnimationFrame, debounce, Intersection Observer.

Accessibility

Skip to main content. Keyboard navigation.

Sticky footer

Mobile sticky CTA полезен.

Сайт.uz

70px desktop, 56px mobile. Smart sticky. Pages per session 2.8 (без sticky 2.1).

Похожие статьи

🌊 Анализ Webflow: профессиональная no-code платформа для дизайнеров 🎨 Анализ Tilda: самый популярный конструктор в Рунете 🏗️ JAMstack архитектура: современный стандарт Static Site Generator: чемпионы скорости и безопасности
🌐 Язык
🇺🇿 O'zbek 🇺🇿 Ўзбек 🇷🇺 Русский 🇬🇧 English