Параметр onPin

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

Синтаксис

var header = document.querySelector("header");
var headroom = new Headroom(header, {
    onPin: function() {
        console.log("Элемент закреплён");
    }
});
headroom.init();
  • header — DOM-элемент, на который будет применён Headroom.
  • onPin — функция, вызываемая при срабатывании события закрепления.

В контексте Headroom.js onPin относится к жизненному циклу элемента. Основные события этого цикла:

  • onUnpin — элемент скрывается при прокрутке вниз.
  • onPin — элемент появляется при прокрутке вверх после скрытия.
  • onTop — элемент находится в верхней точке страницы.
  • onNotTop — элемент покидает верхнюю точку страницы.

Принцип работы

Headroom.js отслеживает направление прокрутки страницы. Когда пользователь скроллит вниз, элемент, к которому применён Headroom, получает класс .headroom--unpinned и скрывается. При прокрутке вверх элемент получает класс .headroom--pinned и возвращается в видимую область. Параметр onPin позволяет выполнять дополнительные действия именно в момент закрепления:

  • Запуск анимаций (например, плавное появление элемента)
  • Изменение стилей элемента
  • Обновление состояния других компонентов интерфейса

Пример с изменением цвета заголовка при закреплении:

var header = document.querySelector("header");
var headroom = new Headroom(header, {
    onPin: function() {
        header.style.backgroundColor = "#3498db";
    },
    onUnpin: function() {
        header.style.backgroundColor = "#2c3e50";
    }
});
headroom.init();

В этом примере при прокрутке вверх заголовок плавно меняет цвет, создавая визуальный эффект закрепления.

Контекст выполнения

Функция, переданная в onPin, выполняется в контексте Headroom-объекта. Это позволяет внутри колбэка обращаться к методам экземпляра, например:

var header = document.querySelector("header");
var headroom = new Headroom(header, {
    onPin: function() {
        this.elem.classList.add("highlight");
    }
});
headroom.init();
  • this.elem — DOM-элемент, к которому применён Headroom.
  • Можно использовать стандартные методы класса Headroom внутри колбэка.

Взаимодействие с CSS-классами

Headroom.js использует CSS-классы для управления состояниями:

  • .headroom--pinned — добавляется при срабатывании onPin.
  • .headroom--unpinned — добавляется при срабатывании onUnpin.

Эти классы позволяют комбинировать JavaScript-колбэки с CSS-анимациями:

header.headroom--pinned {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

header.headroom--unpinned {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

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

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

  1. Появление кнопки навигации При закреплении заголовка можно показать дополнительные элементы меню или кнопки:
onPin: function() {
    document.querySelector(".nav-button").style.display = "block";
}
  1. Изменение высоты заголовка Для экономии места на экране можно уменьшать высоту при закреплении:
onPin: function() {
    header.style.height = "60px";
}
  1. Интеграция с другими скриптами onPin часто используется для синхронизации состояния заголовка с внешними библиотеками анимации или скролла.

Особенности и нюансы

  • onPin срабатывает только после того, как элемент был скрыт (onUnpin) и пользователь начал прокрутку вверх.
  • Если элемент всегда видим и не скрывался, колбэк onPin не вызовется.
  • Можно использовать вместе с offset и tolerance для тонкой настройки чувствительности срабатывания.

Пример настройки с offset и tolerance:

var headroom = new Headroom(header, {
    offset: 100,
    tolerance: 5,
    onPin: function() {
        console.log("Элемент закреплён после 100px прокрутки");
    }
});
headroom.init();
  • offset — количество пикселей прокрутки перед активацией Headroom.
  • tolerance — диапазон изменения прокрутки для срабатывания событий.

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

Оглавление