Классическая скрывающаяся шапка

Headroom.js — это лёгкая JavaScript-библиотека, предназначенная для создания «скрывающихся» шапок на веб-странице. Она позволяет динамически скрывать или показывать заголовок при прокрутке страницы, улучшая восприятие контента и экономя место на экране. Основная идея заключается в отслеживании направления прокрутки: при движении вниз шапка скрывается, при движении вверх — появляется снова.

Для начала необходимо подключить библиотеку. Существует несколько способов:

Через CDN:

Через npm:

npm install headroom.js

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

или любой блок с фиксированным положением.

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

Настройка и параметры

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

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",
    frozen: "headroom--frozen"
  }
});
headroom.init();

Ключевые параметры:

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

Состояния шапки и CSS

Headroom.js управляет классами, которые отражают текущее состояние шапки. Важнейшие из них:

  • headroom--pinned — шапка закреплена и видима.
  • headroom--unpinned — шапка скрыта при прокрутке вниз.
  • headroom--top — страница находится в начале.
  • headroom--not-top — страница прокручена вниз.

На основе этих классов можно создавать плавные анимации с помощью CSS:

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

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

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

События и методы

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

  • headroom.init() — инициализация скрипта.
  • headroom.destroy() — отключение библиотеки и удаление всех классов.
  • headroom.unpin() — скрытие шапки вручную.
  • headroom.pin() — закрепление шапки вручную.
  • headroom.freeze() — замораживание текущего состояния.
  • headroom.unfreeze() — снятие заморозки.

Также доступны события через стандартные DOM-события или кастомные колбэки:

headroom.on('pin', () => console.log('Шапка закреплена'));
headroom.on('unpin', () => console.log('Шапка скрыта'));

Продвинутые техники

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

2. Использование с другими библиотеками: Headroom.js легко интегрируется с анимационными библиотеками вроде GSAP для плавных эффектов, либо с фреймворками вроде React и Vue. В React, например, элемент можно обернуть в компонент и инициализировать Headroom внутри useEffect.

3. Динамическая смена класса в зависимости от прокрутки: Можно использовать метод on('unpin') для изменения стиля шапки, когда она скрывается:

headroom.on('unpin', () => {
  header.style.backgroundColor = "rgba(0,0,0,0.8)";
});

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

Классическая фиксированная шапка:

Инициализация с offset и кастомными классами:

const header = document.querySelector(".headroom");
const headroom = new Headroom(header, {
  offset: 100,
  classes: {
    pinned: "slide-down",
    unpinned: "slide-up",
    initial: "headroom"
  }
});
headroom.init();

CSS-анимации:

.slide-up {
  transform: translateY(-100%);
  transition: transform 0.25s ease-in;
}

.slide-down {
  transform: translateY(0%);
  transition: transform 0.25s ease-out;
}

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

Оглавление