Фиксированное позиционирование

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

Инициализация и подключение

Для работы с Headroom.js необходимо подключить библиотеку через <script> или через пакетный менеджер, например npm:

// Через npm
import Headroom from 'headroom.js';

// Через CDN
<script src="https://unpkg.com/headroom.js@0.12.0/dist/headroom.min.js"></script>

После подключения создаётся экземпляр Headroom, которому передаётся DOM-элемент, который должен реагировать на скролл:

const header = document.querySelector('header');
const headroom = new Headroom(header);
headroom.init();

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

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

Headroom.js предоставляет несколько параметров для тонкой настройки поведения элементов:

  • tolerance — определяет чувствительность к движению. Может быть числом или объектом с параметрами up и down:
const headroom = new Headroom(header, {
    tolerance: {
        up: 5,
        down: 10
    },
    offset: 50,
    classes: {
        initial: 'headroom',
        pinned: 'headroom--pinned',
        unpinned: 'headroom--unpinned',
        top: 'headroom--top',
        notTop: 'headroom--not-top',
        bottom: 'headroom--bottom',
        notBottom: 'headroom--not-bottom'
    }
});
headroom.init();
  • offset — минимальное количество пикселей, которое необходимо проскроллить до срабатывания анимации.
  • classes — набор CSS-классов, которые Headroom.js добавляет элементу в зависимости от состояния. Это позволяет гибко управлять стилями и анимацией через CSS.

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

Headroom.js управляет состояниями элемента через классы:

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

Пример CSS для анимации шапки:

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

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

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

Такой подход позволяет легко добавлять плавные анимации без вмешательства в JavaScript.

События Headroom.js

Headroom.js поддерживает подписку на события для расширенного управления:

  • onPin — вызывается, когда элемент становится видимым.
  • onUnpin — вызывается, когда элемент скрывается.
  • onTop — вызывается, когда страница прокручена в верхнюю позицию.
  • onNotTop — вызывается, когда страница отходит от верхней позиции.
  • onBottom и onNotBottom — аналогично для нижней позиции.

Пример использования событий:

headroom = new Headroom(header);

headroom.on('pin', () => console.log('Элемент зафиксирован'));
headroom.on('unpin', () => console.log('Элемент скрыт'));
headroom.init();

Продвинутые сценарии

  1. Несколько элементов: можно создать несколько экземпляров Headroom для разных элементов страницы. Каждый элемент будет независимо реагировать на прокрутку.

  2. Динамическое изменение offset: значение offset можно менять в процессе работы, например, для адаптивного интерфейса:

headroom.offset = window.innerHeight / 2;
  1. Совмещение с другими библиотеками: Headroom.js совместим с любыми CSS-фреймворками и анимационными библиотеками. Главное — корректно управлять классами состояния.

Оптимизация производительности

Headroom.js использует requestAnimationFrame для отслеживания скролла, что минимизирует нагрузку на браузер. Для больших проектов рекомендуется:

  • Ограничить количество элементов с Headroom.
  • Использовать минимальные анимации CSS.
  • Контролировать события через делегирование, если элементов много.

Практическое применение

Headroom.js идеально подходит для:

  • Фиксированных шапок и меню навигации.
  • Панелей инструментов в веб-приложениях.
  • Футеров, которые появляются только при прокрутке вверх.
  • Легких sticky-блоков без нагрузки на производительность.

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

Оглавление