Метод enable

Метод enable является одним из ключевых инструментов для управления поведением waypoint’ов в библиотеке Waypoints. Его основная задача — активировать ранее созданный waypoint, который мог быть деактивирован с помощью метода disable. Это позволяет динамически управлять триггерами при скролле страницы без необходимости пересоздавать waypoint.

Синтаксис

var waypoint = new Waypoint({
  element: document.getElementById('element-id'),
  handler: function(direction) {
    console.log('Waypoint сработал! Направление:', direction);
  },
  offset: '50%'
});

waypoint.disable(); // Деактивируем waypoint
waypoint.enable();  // Активируем waypoint снова

Пояснения:

  • waypoint.enable() — включает waypoint, делая его снова активным для отслеживания позиции элемента на странице.
  • Метод не принимает аргументов и работает напрямую с объектом waypoint.
  • После вызова enable, waypoint снова реагирует на скролл и вызывает свой handler при достижении заданного offset.

Применение метода enable

  1. Динамическая активация после деактивации

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

var waypoint = new Waypoint({
  element: document.querySelector('.section'),
  handler: function(direction) {
    console.log('Секция достигнута:', direction);
  }
});

// Отключение waypoint
waypoint.disable();

// Включение waypoint через 3 секунды
setTimeout(function() {
  waypoint.enable();
}, 3000);
  1. Комбинация с методами destroy и disable

Метод enable часто используется вместе с disable для управления состоянием waypoint’а без его полного удаления. В отличие от destroy, который полностью удаляет waypoint из DOM и освобождает ресурсы, disable сохраняет объект, но временно блокирует срабатывание. После вызова enable waypoint снова работает:

waypoint.disable();  // Временно блокируем
waypoint.enable();   // Снова активируем
  1. Контроль пользовательских интерактивных элементов

Waypoint может использоваться для запуска анимаций при прокрутке, но иногда необходимо временно остановить такие триггеры. Метод enable позволяет возвращать waypoint в активное состояние без пересоздания:

var waypoint = new Waypoint({
  element: document.querySelector('.animate'),
  handler: function(direction) {
    if (direction === 'down') {
      this.element.classList.add('start-animation');
    }
  }
});

// Блокируем waypoint на время модального окна
waypoint.disable();

// После закрытия окна — снова активируем
document.querySelector('.modal-close').addEventListener('click', function() {
  waypoint.enable();
});

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

  • Метод enable не сбрасывает внутренние параметры waypoint, такие как offset или привязанный элемент. Все настройки остаются прежними.
  • Повторный вызов enable на уже активном waypoint не вызывает ошибок и не приводит к двойному срабатыванию.
  • Метод применим только к существующим объектам waypoint; если объект был удалён через destroy, его необходимо создавать заново.
  • enable полезен для оптимизации работы страницы: вместо удаления и пересоздания waypoint, достаточно временно отключить его, а затем снова активировать.

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

var waypoint1 = new Waypoint({
  element: document.querySelector('#section1'),
  handler: function(direction) {
    console.log('Section 1:', direction);
  },
  offset: '25%'
});

var waypoint2 = new Waypoint({
  element: document.querySelector('#section2'),
  handler: function(direction) {
    console.log('Section 2:', direction);
  },
  offset: '75%'
});

// Деактивируем оба waypoint’а при открытии меню
document.querySelector('.menu').addEventListener('mouseenter', function() {
  waypoint1.disable();
  waypoint2.disable();
});

// Возвращаем их в рабочее состояние при закрытии меню
document.querySelector('.menu').addEventListener('mouseleave', function() {
  waypoint1.enable();
  waypoint2.enable();
});

В этом примере enable используется для динамического управления активностью waypoint’ов в зависимости от действий пользователя, сохраняя при этом всю настройку и обработчики.

Метод enable является безопасным и эффективным способом включать waypoint’ы после временной деактивации, позволяя гибко управлять событиями при скролле без потери ресурсов или необходимости пересоздавать объекты.

Оглавление