Реалізація Sticky Header/Footer: повне керівництво з кодом

Уявіть: інтернет-магазин з 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 vs fixed

Типові помилки при реалізації sticky-елементів

Процес роботи

1. Аналітика — аудит поточної поведінки та Core Web Vitals. Вимірюємо LCP, CLS, INP.
2. Проектування — вибір підходу (sticky/hide-on-scroll), врахування mobile-first.
3. Реалізація — написання коду з інтеграцією у ваш проект. Використовуємо сучасний стек (React 18, TypeScript, CSS Modules).
4. Тестування — перевірка на реальних пристроях (iPhone, Android, iPad), виміри метрик.
5. Деплой — передача коду, документація, навчання вашого розробника.

Терміни та вартість

Термін реалізації — від 3 до 7 робочих днів залежно від складності. Вартість розраховується індивідуально. Ви економите на виправленні помилок, які виникли б при самостійній реалізації. Зв'яжіться з нами для оцінки вашого проєкту — отримайте консультацію та попередній розрахунок протягом одного дня. Замовте реалізацію sticky-елементів під ключ з гарантією 6 місяців.