Метод unfreeze

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

Назначение метода

Headroom.js управляет видимостью заголовка в зависимости от направления прокрутки: при движении вниз шапка скрывается, при движении вверх — появляется. Иногда возникает необходимость временно зафиксировать текущий статус шапки: например, чтобы заголовок оставался видимым во время показа модального окна или анимации.

Метод unfreeze выполняет противоположную операцию относительно метода freeze:

  • freeze() — блокирует динамическое изменение состояния шапки.
  • unfreeze() — снимает блокировку, позволяя заголовку снова реагировать на прокрутку.

Синтаксис

headroom.unfreeze();
  • headroom — экземпляр объекта Headroom, привязанный к DOM-элементу.
  • Метод не принимает аргументов.
  • После вызова unfreeze заголовок возвращается к исходной логике управления видимостью.

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

// Инициализация Headroom
var header = document.querySelector(".header");
var headroom  = new Headroom(header, {
  tolerance: 5,
  offset: 100,
  classes: {
    initial: "headroom",
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned",
    frozen: "headroom--frozen"
  }
});
headroom.init();

// Заморозка заголовка при открытии модального окна
document.querySelector("#openModal").addEventListener("click", function() {
  headroom.freeze();
});

// Разморозка после закрытия модального окна
document.querySelector("#closeModal").addEventListener("click", function() {
  headroom.unfreeze();
});

В этом примере:

  1. Заголовок получает все стандартные классы Headroom (pinned, unpinned, frozen).
  2. При открытии модального окна вызывается freeze(), предотвращая автоматическое скрытие или показ шапки.
  3. После закрытия модального окна вызывается unfreeze(), и заголовок снова реагирует на прокрутку.

Взаимодействие с состояниями заголовка

Headroom.js оперирует тремя основными состояниями:

  1. Pinned — заголовок закреплен в верхней части страницы.
  2. Unpinned — заголовок скрыт.
  3. Frozen — заголовок временно зафиксирован в текущем состоянии.

Метод unfreeze изменяет состояние с frozen на текущее активное состояние pinned или unpinned, в зависимости от направления прокрутки и конфигурации tolerance и offset.

  • Если заголовок был заморожен при состоянии pinned, после unfreeze он остаётся видимым, но снова реагирует на скролл.
  • Если был unpinned, после разморозки заголовок может скрыться при дальнейшем движении вниз.

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

  • Одновременное использование с freeze(): unfreeze() работает корректно только после предыдущего вызова freeze(). Вызов unfreeze() без предварительной заморозки не приводит к ошибке, но не влияет на поведение шапки.
  • События onUnfreeze и onFreeze: библиотека позволяет подключать коллбэки на разморозку и заморозку заголовка:
var headroom = new Headroom(header, {
  onFreeze: function() { console.log("Header frozen"); },
  onUnfreeze: function() { console.log("Header unfrozen"); }
});
headroom.init();
  • CSS-классы: при заморозке заголовку добавляется класс headroom--frozen, который автоматически удаляется при вызове unfreeze. Это позволяет использовать CSS-анимации для визуальной индикации заморозки и разморозки.

Практические сценарии применения

  1. Модальные окна и всплывающие панели — предотвращение смещения шапки при открытии окна.
  2. Анимации на странице — блокировка заголовка во время плавных переходов.
  3. Особые страницы или секции с фиксированным контентом — временная фиксация состояния шапки для улучшения UX.

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

Оглавление