Класс headroom--top

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

В библиотеке Headroom.js создается объект для конкретного DOM-элемента, обычно это шапка сайта (header), и к нему применяются различные классы состояния: headroom--pinned, headroom--unpinned, headroom--top, headroom--not-top, headroom--bottom и headroom--not-bottom. headroom--top активируется, когда элемент полностью видим и прокрутка находится в начале страницы.

Механизм работы класса

  1. Инициализация При создании экземпляра Headroom через конструктор:
var header = document.querySelector("header");
var headroom = new Headroom(header, {
    tolerance: 5,
    offset: 0,
    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 определяет расстояние от верхней границы документа, после которого элемент перестает считаться «на вершине». При offset: 0 класс headroom--top добавляется сразу при загрузке страницы, если прокрутка на самом верху.

  1. События прокрутки Headroom отслеживает вертикальное положение скролла и добавляет либо удаляет headroom--top автоматически.
  • Когда scrollTop = 0, к элементу применяется headroom--top.
  • Когда пользователь прокручивает страницу вниз хоть на 1 пиксель, класс удаляется и добавляется headroom--not-top.

Это позволяет создавать плавные переходы стилей через CSS:

.headroom--top {
    background-color: transparent;
    box-shadow: none;
    transition: all 0.3s ease;
}

.headroom--not-top {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

Настройка чувствительности класса

headroom--top тесно связан с параметром tolerance. Этот параметр определяет минимальное смещение скролла, которое считается изменением состояния.

var headroom = new Headroom(header, {
    tolerance: {
        up: 10,    // пиксели прокрутки вверх
        down: 10   // пиксели прокрутки вниз
    },
    offset: 0
});
  • Если tolerance.up и tolerance.down заданы, класс headroom--top может оставаться на элементе даже при небольших колебаниях скролла.
  • При увеличении значения tolerance элемент становится менее чувствительным к мелким движениям, уменьшая «дергание» класса.

Комбинирование с другими классами

headroom--top часто используется совместно с headroom--pinned и headroom--unpinned для создания комплексной логики:

headroom.init();

document.addEventListener('scroll', function() {
    var header = document.querySelector('header');
    if (header.classList.contains('headroom--top')) {
        console.log('Элемент на верхушке страницы');
    }
});
  • Pinned + top: шапка зафиксирована и находится у верхнего края.
  • Unpinned + not-top: элемент скрыт и уже не в верхней позиции.

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

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

  1. Изменение прозрачности шапки
.headroom--top {
    opacity: 1;
}
.headroom--not-top {
    opacity: 0.9;
    backdrop-filter: blur(5px);
}

  1. Появление фиксированного меню при скролле вниз Комбинация headroom--not-top и headroom--unpinned позволяет скрывать меню при прокрутке вниз и возвращать при возврате вверх.

  2. Анимации при возвращении к верхней точке

.headroom--top {
    transform: translateY(0);
}
.headroom--not-top {
    transform: translateY(-100%);
    transition: transform 0.25s ease-in-out;
}

Контроль через методы API

Headroom.js предоставляет методы, которые можно использовать для принудительного управления классами:

  • headroom.pin() — фиксирует элемент и может добавить headroom--pinned.
  • headroom.unpin() — скрывает элемент и удаляет headroom--top, если необходимо.
  • headroom.destroy() — полностью отключает все классы Headroom, включая headroom--top.

Пример:

if (window.scrollY === 0) {
    headroom.pin(); // гарантирует присутствие headroom--top
}

Рекомендации по использованию

  • Всегда устанавливать offset в соответствии с высотой верхнего элемента, если есть фиксированные элементы над шапкой.
  • Использовать CSS-переходы для плавного изменения внешнего вида при переключении классов.
  • Проверять совместимость с другими библиотеками, которые могут менять позицию или высоту элемента, чтобы headroom--top корректно срабатывал.

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

Оглавление