onUnpin для действий при скрытии

В библиотеке Headroom.js метод onUnpin предназначен для выполнения действий в тот момент, когда элемент шапки (header) скрывается пользователю. Это ключевой механизм для создания динамических интерфейсов, где поведение шапки зависит от прокрутки страницы.

Синтаксис и базовое использование

var header = document.querySelector("header");
var headroom = new Headroom(header, {
  onUnpin: function() {
    console.log("Шапка скрыта");
  }
});
headroom.init();

Пояснение:

  • header — целевой DOM-элемент, который будет скрываться и показываться при прокрутке.
  • Headroom(header, options) — конструктор, принимающий объект настроек.
  • onUnpin — функция обратного вызова, вызываемая при скрытии шапки.
  • headroom.init() — активация скрипта для отслеживания прокрутки.

Метод onUnpin автоматически вызывается после того, как Headroom.js определяет, что пользователь прокрутил страницу вниз, а шапка должна исчезнуть из видимой области.

Типичные сценарии применения onUnpin

  1. Добавление CSS-анимаций при скрытии
onUnpin: function() {
  header.classList.add("slide-up");
}
  • slide-up — CSS-класс с анимацией, который плавно скрывает элемент.
  • Использование классов позволяет отделить логику JS от визуальной части и управлять стилями через CSS.
  1. Скрытие других элементов интерфейса синхронно с шапкой
onUnpin: function() {
  document.querySelector(".toolbar").style.opacity = 0;
}
  • Позволяет создавать связанное поведение нескольких блоков при прокрутке вниз.
  1. Логирование действий или аналитика
onUnpin: function() {
  analytics.trackEvent("header_hidden");
}
  • Включение события в системы аналитики помогает понять поведение пользователей при прокрутке.

Настройка через объект options

Метод onUnpin работает в контексте объекта options, который передается при инициализации:

var headroom = new Headroom(header, {
  tolerance: {
    up: 5,
    down: 10
  },
  offset: 50,
  onUnpin: function() {
    header.classList.add("hidden");
  }
});
  • tolerance — порог срабатывания события: up и down определяют чувствительность прокрутки.
  • offset — минимальное смещение страницы до начала работы Headroom.
  • onUnpin вызывается только после того, как пороги и смещение удовлетворены.

Передача контекста и управление состоянием

Внутри onUnpin можно использовать ссылку на объект Headroom через this:

onUnpin: function() {
  if (!this.elem.classList.contains("hidden")) {
    this.elem.classList.add("hidden");
  }
}
  • this.elem — DOM-элемент, к которому применён Headroom.
  • Контекст this позволяет проверять текущие состояния и предотвращать повторное выполнение действий.

Интеграция с другими событиями Headroom.js

Headroom предоставляет четыре основных события обратного вызова:

  • onPin — шапка появляется
  • onUnpin — шапка скрывается
  • onTop — прокрутка вернулась к верхней точке
  • onNotTop — прокрутка ушла вниз от верхней точки

Использование onUnpin в связке с onPin позволяет создавать эффекты появления и исчезновения:

var headroom = new Headroom(header, {
  onPin: function() {
    header.classList.remove("hidden");
  },
  onUnpin: function() {
    header.classList.add("hidden");
  }
});
headroom.init();
  • Такой подход упрощает управление состоянием видимости шапки без постоянной проверки прокрутки вручную.

Практические рекомендации

  • Всегда использовать CSS-анимации для плавного эффекта скрытия и появления шапки.
  • Проверять состояние класса hidden перед его добавлением, чтобы избежать повторного вызова.
  • Для сложных интерфейсов использовать onUnpin совместно с другими событиями, чтобы синхронизировать поведение нескольких элементов страницы.
  • Настраивать tolerance и offset под конкретный дизайн для точного срабатывания.

Метод onUnpin — это основной инструмент управления поведением шапки при прокрутке вниз. Его грамотное использование позволяет создавать интерфейсы с динамичной визуальной подачей, улучшая пользовательский опыт и экономя пространство на экране.

Оглавление