Метод unpin

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

Синтаксис

headroom.unpin();

Параметры: отсутствуют. Возвращаемое значение: undefined. Метод изменяет внутреннее состояние объекта Headroom и применяет соответствующие CSS-классы к элементу.

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

Метод unpin напрямую манипулирует состоянием Headroom, устанавливая флаг pinned = false и добавляя CSS-класс headroom--unpinned к элементу. При этом автоматически удаляется класс headroom--pinned, если он присутствовал.

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

Внутренние шаги метода:

  1. Проверка текущего состояния элемента (pinned или unpinned).
  2. Если элемент закреплён (pinned), выполняется переход в состояние unpinned.
  3. Добавление класса headroom--unpinned к DOM-элементу.
  4. Удаление класса headroom--pinned при необходимости.
  5. Вызов всех колбэков onUnpin, заданных в конфигурации Headroom.js.

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

Метод unpin часто используется вместе с методами:

  • pin() – возвращает элемент в видимое состояние, добавляя класс headroom--pinned.
  • destroy() – полностью отключает Headroom.js, удаляя все классы и обработчики.
  • freeze() – блокирует динамическое поведение (элементы не будут скрываться и показываться), но можно потом вручную вызвать unpin().

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

// Инициализация Headroom
var header = document.querySelector("header");
var headroom = new Headroom(header, {
    tolerance: 5,
    offset: 50,
    onUnpin: function() {
        console.log("Элемент скрыт");
    }
});

headroom.init();

// Программное скрытие шапки через 2 секунды
setTimeout(function() {
    headroom.unpin();
}, 2000);

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

Особенности применения

  • Метод unpin не изменяет положение прокрутки страницы, он только управляет видимостью элемента.
  • Классы CSS (headroom--unpinned и headroom--pinned) управляют анимацией и визуальным переходом, поэтому важно задать корректные стили.
  • Используется для динамического управления шапкой сайта при событиях, отличных от прокрутки, например при открытии модального окна или при переключении вкладок интерфейса.
  • Можно комбинировать с методами pin и freeze для создания сложного поведения шапки, например: скрытие при прокрутке вниз, автоматическое показание при определённом событии, но блокировка анимации на определённых страницах.

Рекомендации по стилям

Для правильного функционирования unpin и pin рекомендуется использовать следующие CSS-классы:

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

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

Эти классы обеспечивают плавное скрытие и появление шапки при использовании методов Headroom.js.

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

Оглавление