Headroom.js — это библиотека на JavaScript, предназначенная для управления поведением верхних панелей (header) при прокрутке страницы. Основная задача библиотеки — динамически скрывать или показывать элемент в зависимости от направления скролла, создавая плавный пользовательский опыт без необходимости ручного контроля событий прокрутки.
Библиотека работает через детектирование скорости и направления прокрутки, после чего применяет соответствующие CSS-классы к элементу. Эти классы позволяют легко задавать визуальные эффекты через CSS-анимации.
Подключение Headroom.js может происходить двумя способами: через CDN или локальную сборку. Пример подключения через CDN:
Для локальной сборки необходимо скачать минифицированную версию
(headroom.min.js) и подключить ее через
.
Инициализация производится следующим образом:
// Находим элемент header
var myHeader = document.querySelector("header");
// Создаем объект Headroom
var headroom = new Headroom(myHeader, {
tolerance: 5, // Минимальное смещение для реакции на скролл
offset: 100, // Отступ от верха, после которого начинается скрытие
classes: {
initial: "headroom",
pinned: "headroom--pinned",
unpinned: "headroom--unpinned"
}
});
// Активируем Headroom
headroom.init();
Параметры:
tolerance — чувствительность к колебаниям
прокрутки.offset — расстояние от верха страницы, после которого
начинают применяться классы.classes — набор CSS-классов для разных состояний.Headroom.js не задает визуальные эффекты напрямую. Для анимации скрытия и появления необходимо использовать CSS. Пример:
.headroom {
transition: transform 0.3s ease-in-out;
}
.headroom--unpinned {
transform: translateY(-100%);
}
.headroom--pinned {
transform: translateY(0%);
}
В этом примере панель плавно скрывается при прокрутке вниз и возвращается при прокрутке вверх.
Совет: для более сложной анимации можно
комбинировать opacity, box-shadow и
background-color с transform.
Минификация — это процесс удаления всех лишних символов в коде без
изменения функциональности: пробелов, переносов строк, комментариев. В
Headroom.js уже предусмотрена минифицированная версия
headroom.min.js, которая уменьшает размер файла и ускоряет
загрузку страницы.
Преимущества минификации:
Для самостоятельной минификации можно использовать инструменты, такие как:
Пример использования Terser через командную строку:
terser headroom.js -o headroom.min.js -c -m
Параметры:
-c — сжатие кода (compression)-m — минификация имён переменных (mangling)После минификации файл становится компактным, но полностью сохраняет исходный функционал.
При работе с современными сборщиками модулей, такими как Webpack, Rollup или Vite, рекомендуется подключать Headroom.js через npm:
npm install headroom.js
Импорт в проекте:
import Headroom from "headroom.js";
const header = document.querySelector("header");
const headroom = new Headroom(header);
headroom.init();
Современные сборщики автоматически применяют минификацию и tree-shaking, что уменьшает размер итогового бандла.
Headroom.js поддерживает колбэки на разные события:
var headroom = new Headroom(header, {
onPin: function() { console.log("Pinned"); },
onUnpin: function() { console.log("Unpinned"); },
onTop: function() { console.log("At top"); },
onNotTop: function() { console.log("Not at top"); }
});
Это позволяет:
tolerance и
offset под конкретный дизайн сайта.pinned и unpinned для плавного UX.