Метод freeze

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

Основное назначение

freeze позволяет зафиксировать текущее состояние шапки, предотвращая её автоматическое скрытие или показ при скролле. Это особенно полезно в ситуациях, когда требуется:

  • Зафиксировать шапку при отображении модальных окон.
  • Заблокировать анимацию при интерактивных действиях пользователя.
  • Синхронизировать поведение шапки с динамическим контентом, например, при параллакс-эффектах.

Синтаксис

headroom.freeze();

Где headroom — это экземпляр объекта Headroom, созданного с помощью конструктора:

var myHeader = document.querySelector('header');
var headroom = new Headroom(myHeader, {
  tolerance: 5,
  offset: 50,
  classes: {
    initial: "headroom",
    pinned: "headroom--pinned",
    unpinned: "headroom--unpinned",
    top: "headroom--top",
    notTop: "headroom--not-top",
    frozen: "headroom--frozen"
  }
});
headroom.init();

Метод freeze не принимает аргументов и немедленно блокирует обработку скролла. С точки зрения логики Headroom, это эквивалент временной деактивации всех внутренних слушателей событий прокрутки.

Влияние на классы

При вызове freeze Headroom добавляет специальный CSS-класс, который можно использовать для изменения стиля шапки при её заморозке:

.headroom--frozen {
  background-color: rgba(0, 0, 0, 0.8);
  transition: none;
}
  • headroom--frozen добавляется автоматически при вызове freeze.
  • Класс сохраняется до тех пор, пока не будет вызван метод unfreeze.

Таким образом, визуально можно отличить замороженное состояние шапки от обычного поведения pinned/unpinned.

Разморозка состояния

Для восстановления динамического поведения используется метод unfreeze:

headroom.unfreeze();

Особенности работы unfreeze:

  • Возобновляет слежение за прокруткой страницы.
  • Убирает CSS-класс headroom--frozen.
  • Если шапка была в состоянии unpinned до заморозки, она вернется к нему автоматически.

Комбинация freeze/unfreeze позволяет гибко контролировать поведение шапки на различных этапах взаимодействия с пользователем.

Примеры применения

1. Заморозка при открытии меню:

var menuButton = document.querySelector('.menu-btn');
menuButton.addEventListener('click', function() {
  headroom.freeze(); // блокируем движение шапки
  document.querySelector('.menu').classList.toggle('open');
});

2. Разморозка после закрытия модального окна:

var modalClose = document.querySelector('.modal-close');
modalClose.addEventListener('click', function() {
  headroom.unfreeze(); // возобновляем динамику шапки
});

3. Интеграция с событиями страницы:

window.addEventListener('scroll', function() {
  if (window.scrollY > 500) {
    headroom.freeze(); // фиксируем шапку после прокрутки 500px
  } else {
    headroom.unfreeze();
  }
});

Рекомендации по использованию

  • Использовать freeze только для временной блокировки; длительное замораживание может нарушить UX, если шапка перестанет реагировать на скролл.
  • Настроить отдельный CSS-класс для визуального эффекта заморозки.
  • При комбинировании с другими методами Headroom (pin, unpin) учитывать приоритет freeze: заморозка перекрывает все автоматические изменения состояния.

Особенности реализации

  • Метод не удаляет слушатели событий, а лишь приостанавливает их работу.
  • Внутренние таймеры Headroom продолжают работать, но не изменяют состояние шапки.
  • В сочетании с настройкой tolerance позволяет создавать плавные и предсказуемые эффекты при взаимодействии пользователя с сайтом.

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

Оглавление