Метод destroy

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

Синтаксис

headroomInstance.destroy();
  • headroomInstance — объект, созданный через конструктор Headroom.
  • Метод не принимает параметров и не возвращает значения.

Основные функции метода

  1. Удаление обработчиков событий Headroom.js активно следит за прокруткой страницы, используя события scroll и resize. Метод destroy автоматически отключает все связанные слушатели, предотвращая дальнейшие изменения класса элемента и снижая нагрузку на браузер.

  2. Сброс классов CSS При инициализации Headroom.js добавляет к элементу следующие CSS-классы:

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

    Вызов destroy удаляет все эти классы, возвращая элемент к исходному состоянию, которое было до инициализации Headroom.js.

  3. Отмена любых пользовательских колбеков Если при создании экземпляра передавались пользовательские колбеки (onPin, onUnpin, onTop, onNotTop), они больше не будут вызываться после вызова destroy.

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

// Инициализация Headroom
var header = document.querySelector('header');
var headroom = new Headroom(header, {
  tolerance: 5,
  offset: 100,
  classes: {
    pinned: 'custom-pinned',
    unpinned: 'custom-unpinned'
  },
  onPin: function() { console.log('Закреплено'); },
  onUnpin: function() { console.log('Скрыто'); }
});

headroom.init();

// Позже нужно удалить Headroom с элемента
headroom.destroy();

После вызова destroy:

  • Элемент больше не реагирует на прокрутку.
  • CSS-классы custom-pinned, custom-unpinned и базовый headroom удаляются.
  • Консоль больше не выводит сообщения из колбеков.

Особенности поведения

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

  • Взаимодействие с динамическими элементами Если элемент был удален из DOM перед вызовом destroy, метод корректно завершает работу без ошибок, но не может удалить классы, которых уже нет.

  • Возврат к исходному состоянию destroy полностью восстанавливает DOM-элемент так, как он был до инициализации, включая классы, стили и поведение. Это особенно полезно для SPA, где элементы часто перерисовываются.

Практические рекомендации

  • Использовать destroy при переходах между страницами или в рамках одностраничных приложений, чтобы избежать утечек памяти и лишних обработчиков прокрутки.
  • Перед повторной инициализацией Headroom.js на том же элементе вызывать destroy, чтобы гарантировать корректное применение новых настроек.
  • Не пытаться вручную удалять классы Headroom.js без вызова destroy, так как это может оставить активные обработчики и вызвать непредсказуемое поведение.

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

Оглавление