Структура классов по умолчанию

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

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

Headroom.js использует несколько предопределённых CSS-классов, автоматически добавляемых и убираемых в зависимости от состояния скролла.

  1. headroom

    • Присваивается элементу при инициализации Headroom.
    • Служит базовым классом, на котором можно строить собственные стили.
    • Обычно используется для общих правил: высота, позиционирование, фоновый цвет и плавные переходы.
    .headroom {
    transition: transform 0.25s ease-in-out;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

  2. headroom--pinned

    • Применяется, когда панель закреплена и видна при прокрутке вверх.
    • Чаще всего используется для возвращения панели на экран после скрытия.
    .headroom--pinned {
    transform: translateY(0%);
}

  3. headroom--unpinned

    • Применяется, когда панель скрыта при прокрутке вниз.
    • Позволяет анимировать её уход с экрана, обычно через transform: translateY(-100%).
    .headroom--unpinned {
    transform: translateY(-100%);
}

  4. headroom--top

    • Используется, когда скролл находится в верхней точке страницы.
    • Обычно применяется для стилизации панели на начальном экране: например, полностью прозрачный фон или отсутствие тени.
    .headroom--top {
    box-shadow: none;
}

  5. headroom--not-top

    • Активируется, когда пользователь ушёл вниз от верхней точки.
    • Часто используется для добавления тени или изменения цвета фона панели при прокрутке.
    .headroom--not-top {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

  6. headroom--bottom и headroom--not-bottom

    • headroom--bottom применяется, когда скролл достиг нижней границы документа.
    • headroom--not-bottom снимается при уходе от нижней границы.
    • Позволяют реализовать специфичные эффекты на нижней границе страницы, например, фиксацию панели при достижении футера.

Взаимодействие классов

Все перечисленные классы могут сочетаться между собой. Например, элемент может одновременно иметь headroom headroom--pinned headroom--not-top, что сигнализирует о закреплённой панели, которая не находится в верхней точке.

С помощью этих классов легко реализовать комплексные визуальные эффекты без вмешательства в JavaScript-код.

Настройка и кастомизация

Headroom.js позволяет изменять названия классов при инициализации через объект options. Это удобно для интеграции с существующими стилями проекта:

var myElement = document.querySelector("#header");
var headroom  = new Headroom(myElement, {
    classes: {
        initial: "header-initial",
        pinned: "header-visible",
        unpinned: "header-hidden",
        top: "header-top",
        notTop: "header-scrolled",
        bottom: "header-bottom",
        notBottom: "header-not-bottom"
    }
});
headroom.init();
  • initial — класс при инициализации.
  • pinned / unpinned — контролируют видимость при скролле.
  • top / notTop — состояние верхней границы страницы.
  • bottom / notBottom — состояние нижней границы страницы.

Такой подход обеспечивает гибкость и интеграцию с любой CSS-архитектурой, будь то BEM, SMACSS или Tailwind.

Принципы использования

  1. Минимальное вмешательство в DOM — Headroom.js только добавляет или убирает классы.
  2. Чёткая привязка стилей к состояниям — каждый класс отвечает за конкретное визуальное состояние.
  3. Плавность анимации через CSS — библиотека не содержит встроенных анимаций, все эффекты делаются через CSS-переходы или трансформации.
  4. Гибкая настройка имен классов — позволяет интегрировать библиотеку в существующую кодовую базу без конфликтов.

Советы по проектированию CSS для Headroom.js

  • Использовать transform: translateY вместо top для плавной анимации, поскольку transform аппаратно ускоряется в современных браузерах.
  • Добавлять переходы для всех изменяемых свойств, чтобы избежать резких скачков панели.
  • Объединять классы с модификаторами, чтобы минимизировать дублирование CSS.
.headroom {
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

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

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

Эта структура классов по умолчанию обеспечивает мощный и гибкий инструмент для управления поведением верхних панелей в зависимости от прокрутки страницы.

Оглавление