Минимальный код для запуска

Для работы с Headroom.js необходимо сначала подключить библиотеку к проекту. Существует несколько способов: через CDN или через менеджер пакетов npm/yarn.

Подключение через CDN:

Подключение через npm:

npm install headroom.js

После установки через npm библиотеку можно импортировать в проект:

import Headroom from "headroom.js";

Структура HTML

Для минимальной работы Headroom.js достаточно иметь элемент, который будет реагировать на скролл. Чаще всего это шапка сайта (

):




    
Контент страницы...

    
Контент страницы...

    
Контент страницы...

Важно, чтобы на странице было достаточно контента, чтобы появилась прокрутка — иначе эффекта скрытия и появления шапки не будет.

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

Создание объекта Headroom и его привязка к элементу производится с помощью Jav * aScript:

// Получаем DOM-элемент шапки
const header = document.getElementById("header");

// Создаем экземпляр Headroom
const headroom = new Headroom(header);

// Запускаем отслеживание
headroom.init();

На этом минимальный код для работы Headroom.js завершен. Шапка теперь будет автоматически скрываться при прокрутке вниз и появляться при прокрутке вверх.

Основные CSS-классы

Headroom.js управляет классами элемента для создания анимаций и эффектов. Основные классы:

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

Пример простого CSS для базовой анимации шапки:

#header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    transition: transform 0.3s ease;
    z-index: 1000;
}

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

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

Конфигурация

Минимальный код можно расширить через объект настроек при создании Headroom:

const headroom = new Headroom(header, {
    tolerance: 5,        // Пиксели скролла до срабатывания
    offset: 50,          // Смещение от верха для начала скрытия
    classes: {
        initial: "headroom",
        pinned: "headroom--pinned",
        unpinned: "headroom--unpinned",
        top: "headroom--top",
        notTop: "headroom--not-top"
    }
});

headroom.init();

Пояснение параметров:

  • tolerance — определяет минимальное движение скролла для переключения состояния. Меньше значение — более чувствительная реакция.
  • offset — смещение от верхней границы страницы, после которого шапка начнет скрываться.
  • classes — позволяет задать собственные имена классов для разных состояний элемента.

Минимальный пример со всеми компонентами




    
    Headroom.js Demo
    


    
    
Длинный контент для скролла...

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

Оглавление