Параметр onUnpin

onUnpin — это один из ключевых колбэк-параметров в библиотеке Headroom.js, отвечающий за реакцию на событие скрытия шапки при прокрутке страницы вниз. Он позволяет реализовать кастомное поведение при “отталкивании” верхнего блока, когда пользователь скроллит контент вниз и навигационная панель должна исчезнуть.

Сигнатура и назначение

Параметр задается при инициализации экземпляра Headroom:

const header = document.querySelector('header');

const headroom = new Headroom(header, {
  onUnpin: function() {
    console.log('Header скрыт при прокрутке вниз');
  }
});

headroom.init();

Пояснение:

  • onUnpin — это функция без аргументов, которая вызывается каждый раз, когда шапка скрывается в результате прокрутки вниз.
  • Внутри этой функции можно выполнять любые действия: изменять стили элементов, добавлять классы, запускать анимации, отправлять аналитические события.

Использование с классами CSS

Headroom.js по умолчанию управляет классами для <header> или другого DOM-элемента:

  • headroom--unpinned — элемент скрыт (скролл вниз).
  • headroom--pinned — элемент видим (скролл вверх).
  • headroom--top — страница в начале.
  • headroom--not-top — страница прокручена вниз.

onUnpin позволяет дополнительно реагировать на скрытие элемента, например:

const headroom = new Headroom(header, {
  onUnpin: function() {
    header.style.backgroundColor = 'rgba(0,0,0,0.8)';
    header.style.transition = 'background-color 0.3s ease';
  }
});

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

Совмещение с другими колбэками

Headroom.js поддерживает четыре основных колбэка:

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

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

const headroom = new Headroom(header, {
  onPin: function() {
    console.log('Header показан');
  },
  onUnpin: function() {
    console.log('Header скрыт');
  },
  onTop: function() {
    header.style.boxShadow = 'none';
  },
  onNotTop: function() {
    header.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
  }
});

Такой подход позволяет точно контролировать поведение шапки в зависимости от прокрутки и состояния страницы.

Параметры взаимодействия с tolerance и offset

onUnpin тесно связан с настройками tolerance и offset, которые определяют момент срабатывания:

  • tolerance — минимальное расстояние прокрутки, после которого шапка скрывается.

    const headroom = new Headroom(header, {
  tolerance: 10,
  onUnpin: function() {
    console.log('Сработал unpin после 10px прокрутки вниз');
  }
});

  • offset — высота от верхнего края страницы, после которой включается логика pin/unpin.

    const headroom = new Headroom(header, {
  offset: 100,
  onUnpin: function() {
    console.log('Скролл ниже 100px — шапка скрыта');
  }
});

Эти настройки позволяют гибко регулировать момент, когда onUnpin активируется, предотвращая слишком резкое или частое скрытие шапки при мелкой прокрутке.

Реальные сценарии применения onUnpin

  1. Изменение стилей навигации При скрытии шапки можно уменьшить высоту элементов, менять фон или прозрачность, создавая эффект компактной прокрутки.

  2. Анимации и переходы Запуск CSS-анимаций или анимаций через JavaScript при событии unpin добавляет плавность интерфейсу.

  3. Отправка аналитики Например, фиксировать, что пользователь активно скроллит вниз и скрывает навигационное меню:

    onUnpin: function() {
  analytics.track('header_hidden');
}

  4. Адаптация мобильного интерфейса При прокрутке вниз скрытие шапки освобождает полезное пространство экрана на мобильных устройствах, улучшая UX.

Важные нюансы

  • onUnpin срабатывает только при прокрутке вниз, когда шапка должна исчезнуть.
  • Функция не получает аргументов, поэтому для работы с состоянием DOM нужно использовать внешние переменные или замыкания.
  • Не рекомендуется помещать тяжелые операции в onUnpin, чтобы не замедлять скролл и отзывчивость интерфейса.

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

Оглавление