Sticky header с headroom

Headroom.js — это библиотека для управления поведением фиксированных заголовков на веб-страницах. Она позволяет автоматически скрывать или показывать шапку при прокрутке страницы, что улучшает пользовательский опыт и экономит место на экране.

Главная идея Headroom.js заключается в наблюдении за направлением и скоростью прокрутки страницы, после чего применяется соответствующий CSS-класс к элементу, обычно <header>, для управления его видимостью.

// Пример базовой инициализации
const header = document.querySelector("header");
const headroom = new Headroom(header);
headroom.init();

В этом примере Headroom создаёт экземпляр для элемента <header> и автоматически добавляет к нему необходимые слушатели прокрутки.

Классы CSS, используемые Headroom.js

Headroom.js управляет видимостью элемента через CSS-классы. Основные из них:

  • headroom — базовый класс, который добавляется к элементу после инициализации.
  • headroom–pinned — элемент видим и закреплён в верхней части экрана.
  • headroom–unpinned — элемент скрыт, обычно при прокрутке вниз.
  • headroom–top — элемент находится в начале страницы.
  • headroom–not-top — элемент покинул верх страницы.
  • headroom–bottom — элемент достиг нижней границы страницы.
  • headroom–not-bottom — элемент выше нижней границы страницы.

Эти классы позволяют использовать CSS-переходы и анимации для плавного появления и скрытия шапки.

header {
  transition: transform 0.3s ease-in-out;
}

.headroom--unpinned {
  transform: translateY(-100%);
}

.headroom--pinned {
  transform: translateY(0);
}

Настройка параметров Headroom.js

Headroom.js предоставляет множество опций для тонкой настройки поведения заголовка:

  • tolerance — количество пикселей прокрутки, после которых срабатывает событие скрытия/показа. Можно задать одно число или объект {up: x, down: y}.
  • offset — минимальная прокрутка сверху страницы, при которой начинает работать библиотека.
  • classes — объект для переопределения CSS-классов по умолчанию.
  • onPin, onUnpin, onTop, onNotTop, onBottom, onNotBottom — функции обратного вызова при изменении состояния элемента.
const headroom = new Headroom(header, {
  tolerance: { up: 5, down: 10 },
  offset: 50,
  classes: {
    pinned: "header-visible",
    unpinned: "header-hidden",
  },
  onPin: () => console.log("Header pinned"),
  onUnpin: () => console.log("Header unpinned"),
});
headroom.init();

Использование с современными фреймворками

Headroom.js легко интегрируется с React, Vue или Angular. В React можно создать компонент обёртку для <header>:

import React, { useEffect, useRef } from "react";
import Headroom from "headroom.js";

export default function StickyHeader({ children }) {
  const headerRef = useRef(null);

  useEffect(() => {
    const headroom = new Headroom(headerRef.current);
    headroom.init();
    return () => headroom.destroy();
  }, []);

  return (
    <header ref={headerRef}>
      {children}
    </header>
  );
}

Во Vue достаточно создать директиву для автоматического подключения Headroom.js к нужному элементу.

Дополнительные приёмы для UX

  1. Плавные анимации — комбинировать transform и transition для минимизации «дёргания» заголовка.
  2. Различные скорости скрытия/показа — задавать разные значения tolerance для прокрутки вверх и вниз.
  3. Интеграция с навигационными меню — при скрытии шапки оставлять доступными всплывающие панели или кнопки.
  4. Мобильные адаптации — уменьшать высоту шапки при прокрутке вниз, а при прокрутке вверх — полностью разворачивать.
@media (max-width: 768px) {
  header {
    height: 60px;
  }
  .headroom--unpinned {
    transform: translateY(-60px);
  }
}

Советы по производительности

  • Использовать requestAnimationFrame для плавного обновления стиля элемента. Headroom.js делает это автоматически, но для сложных анимаций можно кастомизировать.
  • Ограничивать обработку событий до одного элемента, чтобы не перегружать браузер.
  • Проверять совместимость с другими скриптами, которые управляют прокруткой, чтобы избежать конфликтов.

Расширенные возможности

  • Sticky header с динамическим размером: можно изменять высоту шапки в зависимости от состояния прокрутки.
  • Подключение к Intersection Observer: скрывать шапку при просмотре определённых секций страницы.
  • События для аналитики: использовать onPin и onUnpin для фиксации пользовательского поведения.
const headroom = new Headroom(header, {
  onPin: () => analytics.track("HeaderPinned"),
  onUnpin: () => analytics.track("HeaderHidden"),
});

Headroom.js сочетает простоту и гибкость, позволяя создавать современный и отзывчивый интерфейс с динамическими заголовками, которые улучшают взаимодействие пользователя с сайтом.

Оглавление