Работа с библиотеками плавной прокрутки

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

Подключение Headroom.js возможно двумя способами: через CDN или через npm/yarn.

CDN:

<script src="https://unpkg.com/headroom.js@0.12.0/dist/headroom.min.js"></script>

npm:

npm install headroom.js

После установки библиотеку необходимо инициализировать на выбранном DOM-элементе.

// Получаем элемент
var header = document.querySelector("header");

// Инициализируем Headroom
var headroom = new Headroom(header, {
  tolerance: 5,
  offset: 50,
  classes: {
    initial: "headroom",
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned",
    top: "headroom--top",
    notTop: "headroom--not-top"
  }
});

// Запускаем
headroom.init();

Основные параметры конфигурации

1. tolerance — определяет порог изменения прокрутки, после которого элемент будет скрыт или показан. Может быть числом (в пикселях) или объектом с раздельным значением для up и down.

2. offset — смещение в пикселях от верха страницы, после которого библиотека начинает реагировать на прокрутку.

3. classes — объект, позволяющий задать CSS-классы для различных состояний элемента:

  • initial — базовый класс при инициализации.
  • pinned — элемент виден при прокрутке вверх.
  • unpinned — элемент скрыт при прокрутке вниз.
  • top — элемент находится у верхней границы страницы.
  • notTop — элемент не на верхней границе страницы.

События Headroom.js

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

header.addEventListener("headroom.pin", function() {
  console.log("Элемент показан");
});

header.addEventListener("headroom.unpin", function() {
  console.log("Элемент скрыт");
});

header.addEventListener("headroom.top", function() {
  console.log("Находится у верха страницы");
});

header.addEventListener("headroom.notTop", function() {
  console.log("Не у верха страницы");
});

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

Адаптивное поведение

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

var mediaQuery = window.matchMedia("(max-width: 768px)");

if (mediaQuery.matches) {
  headroom.disable(); // отключение для мобильных устройств
} else {
  headroom.init();
}

Такой подход предотвращает некорректное скрытие элементов на маленьких экранах.

Интеграция с CSS-анимациями

Headroom.js не содержит встроенных анимаций, поэтому видимые переходы реализуются через CSS:

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

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

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

Благодаря этому элемент плавно скрывается при прокрутке вниз и появляется при прокрутке вверх. Для более сложных эффектов можно комбинировать с opacity, box-shadow или другими свойствами.

Советы по производительности

  1. Использовать requestAnimationFrame при изменении стилей через события Headroom.js, если требуется дополнительная логика.
  2. Минимизировать количество тяжелых операций в обработчиках headroom.pin и headroom.unpin.
  3. Применять CSS-трансформации вместо изменения top или margin, так как они обрабатываются GPU и не вызывают перерисовку страницы.

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

Фиксированная шапка сайта:

var header = document.querySelector(".site-header");
var headroom = new Headroom(header, {
  tolerance: 10,
  offset: 100
});
headroom.init();

Скрытие боковой панели при прокрутке вниз:

var sidebar = document.querySelector(".sidebar");
var sidebarHeadroom = new Headroom(sidebar, {
  tolerance: { up: 5, down: 10 },
  offset: 50,
  classes: {
    initial: "sidebar",
    pinned: "sidebar--visible",
    unpinned: "sidebar--hidden"
  }
});
sidebarHeadroom.init();

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

Оглавление