Класс headroom

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

Подключение библиотеки

Для использования Headroom.js достаточно подключить скрипт и CSS-анимацию (если требуется). Поддерживаются как классический <script>, так и установка через npm:

<script src="https://unpkg.com/headroom.js@0.12.0/dist/headroom.min.js"></script>

Или через npm:

npm install headroom.js

Инициализация Headroom

Для начала работы с Headroom необходимо выбрать элемент, который будет управляться библиотекой, чаще всего это <header>:

var myHeader = document.querySelector("header");
var headroom  = new Headroom(myHeader);
headroom.init();

Ключевой момент: по умолчанию Headroom использует CSS-классы .headroom--pinned и .headroom--unpinned для управления видимостью элемента. Эти классы можно переопределить через параметры.

Настройка поведения

Headroom.js предоставляет несколько важных опций для настройки:

  • tolerance — чувствительность к скроллу. Может быть числом (пиксели) или объектом с up и down.
tolerance: { up: 5, down: 10 }
  • offset — высота в пикселях, после которой шапка начнёт прятаться при скролле вниз.
offset: 100
  • classes — объект с названиями CSS-классов, используемых Headroom:
classes: {
  initial: "headroom",
  pinned: "headroom--pinned",
  unpinned: "headroom--unpinned",
  top: "headroom--top",
  notTop: "headroom--not-top",
  bottom: "headroom--bottom",
  notBottom: "headroom--not-bottom"
}
  • onPin / onUnpin / onTop / onNotTop / onBottom / onNotBottom — колбэки, вызываемые при соответствующих событиях. Позволяют интегрировать дополнительные эффекты, например, анимации или изменение стиля.
var headroom = new Headroom(myHeader, {
  onUnpin: function() { console.log("Шапка скрыта"); },
  onPin: function() { console.log("Шапка показана"); }
});
headroom.init();

Интеграция с CSS-анимациями

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

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

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

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

Этот подход позволяет шапке выезжать и скрываться без резких скачков.

Поведение при разных сценариях

  • Скролл вверх/вниз — при движении вниз шапка скрывается, при движении вверх возвращается.
  • Достижение верха страницы — шапка может фиксироваться в видимой позиции, используя класс .headroom--top.
  • Достижение низа страницы — можно задействовать класс .headroom--bottom, полезно для футеров и sticky-элементов.

Пример продвинутой конфигурации

var header = document.querySelector("header");

var headroom = new Headroom(header, {
  tolerance: { up: 10, down: 20 },
  offset: 50,
  classes: {
    initial: "headroom",
    pinned: "headroom--visible",
    unpinned: "headroom--hidden",
    top: "headroom--top",
    notTop: "headroom--scrolled"
  },
  onPin: function() { header.style.backgroundColor = "#fff"; },
  onUnpin: function() { header.style.backgroundColor = "transparent"; }
});

headroom.init();

В этом примере шапка меняет фон при скрытии/показе и использует кастомные CSS-классы для анимации.

Советы по оптимизации

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

Особенности использования с SPA

При использовании в одностраничных приложениях (Vue, React, Angular) Headroom инициализируется после рендера DOM:

mounted() {
  const header = this.$refs.header;
  const headroom = new Headroom(header);
  headroom.init();
}

Важно повторно пересоздавать экземпляр при динамическом изменении DOM, чтобы шапка корректно реагировала на скролл.

Полезные расширения

  • Headroom.js легко интегрируется с анимационными библиотеками (GSAP, Animate.css).
  • Возможна комбинация с IntersectionObserver для дополнительной логики скрытия элементов.
  • Поддерживает мобильные устройства, автоматически корректируя поведение при тач-скролле.

Заключение технического описания

Headroom.js предоставляет мощный, но при этом лёгкий механизм управления видимостью шапки. Благодаря гибкой конфигурации, CSS-анимациям и колбэкам его можно адаптировать под широкий спектр интерфейсов: от минималистичных лендингов до сложных SPA с динамическим контентом.

Оглавление