Представьте: интернет-магазин с 50 000 товаров. Sticky-хедер при скролле занимает 10% экрана, ухудшая LCP на 1.5 секунды и увеличивая CLS до 0.25. На мобильных кнопка «Купить» перекрывается нижней навигацией без safe-area. Такие проблемы решаются production-ready кодом, прошедшим проверку на сайтах со 100k+ сессий в день. Мы, команда с 10+ лет опыта в веб-разработке, реализовали sticky-элементы для более чем 50 проектов. Разберём реализацию sticky header/footer с hide-on-scroll, React-хуком и поддержкой iOS. Если вам нужно готовое решение — закажите его под ключ с гарантией 6 месяцев.
Как работает position: sticky?
position: sticky — базовый инструмент, но он не лишён нюансов. Родительский контейнер не должен иметь overflow: hidden, иначе прилипание не сработает. Свойство не поддерживает «убегание» при скролле вниз и может конфликтовать с кастомными отступами. Для простых сценариев — ок, для сложных — нет. Согласно MDN, position: sticky — это гибрид relative и fixed.
Базовый CSS для sticky header
/* Стили для sticky header */ .site-header { position: sticky; top: 0; z-index: 100; background: #fff; will-change: transform; transition: box-shadow 0.2s ease; } .site-header--scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); } /* Hide-on-scroll: скрытие при прокрутке вниз */ .site-header--hidden { transform: translateY(-100%); transition: transform 0.3s ease; } /* Sticky footer с safe-area */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: #fff; border-top: 1px solid #e2e8f0; padding-bottom: env(safe-area-inset-bottom); padding-bottom: max(env(safe-area-inset-bottom), 8px); } /* Sidebar с учётом высоты хедера */ :root { --header-height: 64px; } .sidebar { position: sticky; top: calc(var(--header-height) + 24px); max-height: calc(100vh - var(--header-height) - 48px); overflow-y: auto; overscroll-behavior: contain; } /* Anchor-ссылки: scroll-margin-top */ [id] { scroll-margin-top: calc(var(--header-height, 64px) + 16px); } Почему transform эффективнее для hide-on-scroll?
Изменение transform не вызывает reflow — браузер обрабатывает его на GPU. Это в 10+ раз быстрее, чем модификация top или height. Паттерн hide-on-scroll: скрываем хедер при прокрутке вниз, показываем при прокрутке вверх. Используем throttling через requestAnimationFrame для минимизации нагрузки. Типичная реализация на нативном JavaScript:
const header = document.querySelector('.site-header'); let lastScrollY = 0; let scrollStart = 0; let hidden = false; const THRESHOLD = 100; const HIDE_AFTER = 50; function onScroll() { const y = window.scrollY; const diff = y - lastScrollY; if (diff > 0) { if (!hidden && y > THRESHOLD && y - scrollStart > HIDE_AFTER) { header.classList.add('site-header--hidden'); hidden = true; } } else { if (hidden) { header.classList.remove('site-header--hidden'); hidden = false; scrollStart = y; } } lastScrollY = y; } let ticking = false; window.addEventListener('scroll', () => { if (!ticking) { requestAnimationFrame(() => { onScroll(); ticking = false; }); ticking = true; } }, { passive: true }); Как реализовать hide-on-scroll с React-хуком?
На React 18+ используем настраиваемый хук, возвращающий состояния isScrolled и isVisible. Это в 3–5 раз уменьшает количество перерисовок по сравнению с прямой манипуляцией DOM. Вот полный пример хука и компонента:
import { useState, useEffect, useRef } from 'react'; interface StickyHeaderState { isScrolled: boolean; isVisible: boolean; scrollY: number; } function useStickyHeader(hideOnScrollDown = true): StickyHeaderState { const [state, setState] = useState<StickyHeaderState>({ isScrolled: false, isVisible: true, scrollY: 0 }); const lastScrollY = useRef(0); const scrollStart = useRef(0); useEffect(() => { let ticking = false; const handler = () => { if (ticking) return; ticking = true; requestAnimationFrame(() => { const y = window.scrollY; const diff = y - lastScrollY.current; setState(prev => { let isVisible = prev.isVisible; if (hideOnScrollDown) { if (diff > 0 && y > 100 && y - scrollStart.current > 50) { isVisible = false; } else if (diff < 0) { if (!isVisible) scrollStart.current = y; isVisible = true; } } return { isScrolled: y > 10, isVisible, scrollY: y }; }); lastScrollY.current = y; ticking = false; }); }; window.addEventListener('scroll', handler, { passive: true }); return () => window.removeEventListener('scroll', handler); }, [hideOnScrollDown]); return state; } export function SiteHeader() { const { isScrolled, isVisible } = useStickyHeader(true); return ( <header className={[ 'site-header', isScrolled ? 'site-header--scrolled' : '', !isVisible ? 'site-header--hidden' : '', ].filter(Boolean).join(' ')} > {/* контент */} </header> ); } Как избежать перекрытия контента sticky-хедером при якорных ссылках?
Добавьте CSS-свойство scroll-margin-top всем элементам с id: scroll-margin-top: calc(var(--header-height) + 16px). Или используйте JS для вычисления offset и ручного scrollTo при клике на якорные ссылки. Без этого якоря будут прятаться под хедером, что ухудшает UX.
Что такое safe-area-inset-bottom и как его использовать?
Для мобильной навигации снизу используем position: fixed с учётом env(safe-area-inset-bottom). В <head> добавьте <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">. Компенсируйте высоту в контенте: padding-bottom: calc(60px + env(safe-area-inset-bottom)). Это предотвращает перекрытие контента системными панелями iOS.
Что входит в работу?
- Аудит текущей реализации sticky-элементов с замером Core Web Vitals.
- Разработка кастомного решения на вашем стеке (React, Vue, Angular или нативный JS).
- Интеграция с существующей архитектурой, включая SSR и CSRF-защиту.
- Оптимизация производительности: устранение layout thrashing, минимизация reflow.
- Тестирование на реальных устройствах (iPhone, Android, iPad) с разными версиями браузеров.
- Предоставление документации и обучение вашего разработчика.
- Пост-релизная поддержка в течение 6 месяцев.
Поддержка браузеров
Sticky-элементы поддерживаются во всех современных браузерах (Chrome 56+, Firefox 59+, Safari 8+, Edge 16+). Для IE11 требуется полифилл. Safe-area поддерживается в Safari начиная с iOS 11.Сравнение подходов: sticky vs fixed
| Параметр | position: sticky | position: fixed |
|---|---|---|
| Встраивание в поток | Да | Нет |
| Занимает место | Да | Нет |
| Прилипание при скролле | Любое направление | Фиксированное положение |
| Производительность | Высокая | Высокая |
| Поддержка hide-on-scroll | Требуется JS | Требуется JS |
Типичные ошибки при реализации sticky-элементов
| Проблема | Решение |
|---|---|
Родительский контейнер имеет overflow: hidden |
Уберите overflow: hidden или измените структуру |
Не настроен z-index |
Задайте z-index: 100 для sticky-элемента |
Отсутствует will-change: transform |
Добавьте will-change: transform для производительности |
Не учтена safe-area-inset-bottom на мобильных |
Используйте env(safe-area-inset-bottom) в footer |
Якорные ссылки без scroll-margin-top |
Добавьте scroll-margin-top всем элементам с id |
Использование top или height для анимации скрытия |
Используйте transform: translateY() |
Процесс работы
- Аналитика — аудит текущего поведения и Core Web Vitals. Замеряем LCP, CLS, INP.
- Проектирование — выбор подхода (sticky/hide-on-scroll), учёт mobile-first.
- Реализация — написание кода с интеграцией в ваш проект. Используем современный стек (React 18, TypeScript, CSS Modules).
- Тестирование — проверка на реальных устройствах (iPhone, Android, iPad), замеры метрик.
- Деплой — передача кода, документация, обучение вашего разработчика.
Сроки и стоимость
Срок реализации — от 3 до 7 рабочих дней в зависимости от сложности. Стоимость рассчитывается индивидуально. Вы экономите на исправлении ошибок, которые возникли бы при самостоятельной реализации. Свяжитесь с нами для оценки вашего проекта — получите консультацию и предварительный расчёт в течение одного дня. Закажите реализацию sticky-элементов под ключ с гарантией 6 месяцев.