Класс headroom--unpinned

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

Механизм появления класса

Headroom.js отслеживает направление прокрутки страницы с помощью события scroll. При каждом изменении положения страницы вычисляется:

  • текущее положение прокрутки;
  • предыдущая позиция;
  • направление движения (вверх или вниз).

Если направление вниз и элемент шапки находится в видимой зоне, Headroom.js:

  1. Добавляет к шапке класс headroom--unpinned;
  2. Убирает класс headroom--pinned (если он был ранее).

Это позволяет браузеру с помощью CSS скрывать шапку плавно, используя анимации, переходы и трансформации.

Пример CSS для headroom--unpinned

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
}

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

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

В этом примере:

  • .header.headroom--unpinned — скрывает шапку, сдвигая её вверх за пределы видимой области;
  • .header.headroom--pinned — возвращает шапку в исходное положение;
  • transition обеспечивает плавную анимацию движения.

Конфигурация поведения через JavaScript

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

var header = document.querySelector(".header");
var headroom  = new Headroom(header, {
  tolerance: {
    up: 10,
    down: 5
  },
  offset: 50,
  classes: {
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned",
    top: "headroom--top",
    notTop: "headroom--not-top",
    bottom: "headroom--bottom",
    notBottom: "headroom--not-bottom"
  }
});

headroom.init();
  • tolerance.up / tolerance.down — минимальное смещение прокрутки для срабатывания смены класса;
  • offset — точка на странице, после которой начинает применяться логика скрытия;
  • classes.unpinned — задаёт имя класса, который будет добавляться при скрытии шапки;
  • classes.pinned — класс для шапки, когда она видима.

Использование этих параметров позволяет точно настроить, через сколько пикселей прокрутки шапка будет скрываться и возвращаться.

Поведение при разных сценариях прокрутки

  1. Плавная прокрутка вниз При медленном движении вниз шапка получает класс headroom--unpinned, скрывается и освобождает пространство для контента.

  2. Резкая прокрутка вверх Если пользователь прокручивает страницу вверх, класс headroom--pinned снова добавляется, и шапка возвращается на экран.

  3. На верхней границе страницы Если шапка находится в начале страницы, может применяться класс headroom--top, что позволяет задать отдельные стили для фиксированной позиции.

  4. На нижней границе страницы Если страница прокручена до низа, можно использовать класс headroom--bottom для дополнительной логики, например, оставлять шапку открытой для важных действий.

Интеграция с динамическим контентом

При использовании AJAX или динамического изменения контента важно:

  • вызывать headroom.update() после изменения высоты шапки или появления новых элементов в шапке;
  • проверять корректность классов headroom--unpinned и headroom--pinned, чтобы шапка всегда оставалась синхронизированной с текущей прокруткой.

Пример:

// После загрузки динамического контента
headroom.update();

Дополнительные возможности с классом headroom--unpinned

  • Анимации и эффекты: сочетание с opacity, transform, filter позволяет создавать уникальные визуальные эффекты при скрытии шапки.
  • Условное скрытие: можно комбинировать с медиа-запросами, чтобы на мобильных устройствах шапка скрывалась быстрее.
  • Совместимость с библиотеками UI: Headroom.js хорошо работает с любыми фреймворками, где шапка фиксирована, включая React, Vue и Angular, благодаря универсальной логике классов.
Оглавление