Метод pin

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

Синтаксис

headroom.pin();
  • headroom — объект, созданный через конструктор Headroom, например:
var header = document.querySelector('header');
var headroom  = new Headroom(header);
headroom.init();
  • Вызов метода pin активирует CSS-класс, который отвечает за закреплённое состояние элемента.

Механизм работы

Когда вызывается pin, Headroom.js выполняет следующие действия:

  1. Добавление класса headroom--pinned Метод добавляет к элементу класс headroom--pinned, который по умолчанию фиксирует элемент в видимой позиции.

  2. Удаление класса headroom--unpinned Если ранее элемент был скрыт через метод unpin (или автоматически в зависимости от прокрутки), класс headroom--unpinned удаляется, чтобы восстановить видимость.

  3. Обновление состояния элемента Внутреннее состояние объекта Headroom обновляется, что позволяет последующим вызовам методов корректно отслеживать текущее положение элемента.

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

Пример 1. Программное закрепление заголовка

var header = document.querySelector('header');
var headroom = new Headroom(header);
headroom.init();

// Принудительно закрепляем заголовок
headroom.pin();

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

Пример 2. Комбинация с событиями

document.querySelector('#showHeaderBtn').addEventListener('click', function() {
    headroom.pin();
});

Нажатие на кнопку вызывает метод pin, что позволяет динамически управлять видимостью навигации.

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

Метод pin тесно связан с методами unpin и destroy:

  • unpin() — скрывает элемент, добавляя класс headroom--unpinned.
  • destroy() — полностью отключает Headroom.js, убирая все добавленные классы и обработчики событий.

Пример сочетания методов:

headroom.unpin(); // скрывает элемент
setTimeout(() => {
    headroom.pin(); // через 3 секунды возвращает видимость
}, 3000);

Особенности и рекомендации

  • Метод pin не изменяет направление прокрутки; он просто принудительно закрепляет элемент в видимой позиции.
  • Если на элемент одновременно действуют CSS-переходы (transition), закрепление через pin учитывает их и плавно анимирует появление.
  • В случаях, когда требуется временно отключить автоматическое скрытие/появление, можно комбинировать pin с удалением обработчиков событий прокрутки через destroy.

Влияние на CSS

Для корректной работы метода pin следует иметь базовые стили:

.headroom {
  transition: transform 0.25s ease-in-out;
}
.headroom--pinned {
  transform: translateY(0%);
}
.headroom--unpinned {
  transform: translateY(-100%);
}
  • headroom--pinned отвечает за видимую, закреплённую позицию.
  • headroom--unpinned — за скрытое состояние.
  • Метод pin добавляет первый класс и удаляет второй, обеспечивая мгновенный или анимированный возврат элемента на экран.

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

Оглавление