Базовый паттерн
#sticky-glass-header•intermediate•Тип: pattern
Умная фиксированная шапка со сжатием и размытием
Навигационная панель, которая плавно уменьшает высоту, активирует матовое размытие фона и границу при начале скролла страницы вниз.
#header#navbar#sticky#glass#scroll-state#blur#navigation
Инженерный разбор & UX-логика
Верхняя панель навигации, зафиксированная в топе экрана (sticky/fixed), которая динамически реагирует на scrollY пользователя, меняя визуальный вес.
💡 Почему это работает: На самом верху страницы шапка просторная и прозрачная (не отвлекает от Hero). При скролле она становится компактной и контрастной, сохраняя доступ к меню и кнопке входа.
Где использовать
- Любые многостраничные сайты, лендинги и веб-сервисы
- Интерфейсы документации и базы знаний
Частые архитектурные ошибки
- Отсутствие throttle на событии scroll, что вызывает перерасчёт стилей 120 раз в секунду
- Слишком большой z-index, перекрывающий всплывающие модальные окна (z-50 против z-9999)