onPin для действий при появлении

В библиотеке Headroom.js событие onPin является одним из ключевых инструментов для управления поведением элементов при прокрутке страницы. Оно срабатывает в момент, когда элемент прикрепляется обратно к верхней части экрана после того, как ранее был скрыт при прокрутке вниз.

Основное назначение onPin

Событие onPin позволяет реализовать действия, которые должны происходить только при появлении шапки или другого фиксированного блока. Например:

  • добавление классов для анимации появления;
  • восстановление видимости скрытых кнопок или навигационных элементов;
  • запуск JavaScript-функций, зависящих от видимости элемента;
  • синхронизация состояния других интерфейсных блоков с прокручиваемой шапкой.

Синтаксис подключения

Headroom.js подключается к элементу следующим образом:

var header = document.querySelector("header");
var headroom = new Headroom(header, {
  tolerance: 5,
  offset: 50,
  classes: {
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned",
    top: "headroom--top",
    notTop: "headroom--not-top",
    initial: "headroom"
  },
  onPin: function() {
    console.log("Элемент снова видим");
  }
});
headroom.init();
  • header – элемент DOM, к которому применяется Headroom.js.
  • tolerance – число пикселей, на которое можно прокрутить, прежде чем триггер сработает.
  • offset – смещение от верхнего края страницы, после которого поведение активируется.
  • classes – объект с классами для различных состояний (pinned, unpinned, top, notTop, initial).
  • onPin – функция, вызываемая при закреплении элемента.

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

  1. Добавление анимации появления:
onPin: function() {
  header.classList.add("fade-in");
  setTimeout(() => {
    header.classList.remove("fade-in");
  }, 500);
}

Этот код добавляет класс анимации fade-in на 500 мс, когда шапка снова появляется на экране.

  1. Изменение состояния кнопок меню:
onPin: function() {
  document.querySelector(".menu-button").style.display = "block";
}

После закрепления шапки кнопка меню становится видимой.

  1. Синхронизация с другими блоками:
onPin: function() {
  var sidebar = document.querySelector(".sidebar");
  sidebar.classList.add("active");
}

Когда верхний элемент фиксируется, соседний сайдбар получает активный класс для отображения или анимации.

Взаимодействие с другими событиями

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

  • onUnpin – вызывается при скрытии элемента;
  • onTop – вызывается при достижении верхней границы страницы;
  • onNotTop – вызывается при уходе с верхней границы;
  • onUnfix и onFix – для управления фиксированным состоянием.

Событие onPin часто используется в паре с onUnpin для создания плавных интерфейсных эффектов, когда элемент динамически исчезает и появляется в зависимости от направления прокрутки.

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

  • Использовать минимальное количество тяжелых операций внутри onPin, чтобы не блокировать основной поток браузера.
  • Для анимаций лучше работать через CSS-классы, а не напрямую изменять стили через JS, это повышает производительность.
  • Совмещать с tolerance и offset для тонкой настройки чувствительности реакции на прокрутку.
  • Проверять совместимость с мобильными устройствами, так как жесткая анимация может мешать UX при быстрых свайпах.

Пример комплексного подхода

var header = document.querySelector("header");
var headroom = new Headroom(header, {
  offset: 100,
  tolerance: 10,
  classes: {
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned"
  },
  onPin: function() {
    header.classList.add("visible");
    document.querySelector(".cta-button").classList.add("highlight");
  },
  onUnpin: function() {
    header.classList.remove("visible");
    document.querySelector(".cta-button").classList.remove("highlight");
  }
});
headroom.init();

В этом примере шапка и кнопка с призывом к действию реагируют синхронно: при закреплении шапка становится видимой и кнопка подсвечивается, при скрытии — исчезают соответствующие классы.

Событие onPin является универсальным инструментом для создания интерактивного, динамичного интерфейса с адаптивным поведением шапок и других фиксированных элементов. Его правильное использование позволяет реализовать плавные и отзывчивые UI-эффекты без лишнего кода и с высокой производительностью.

Оглавление