Условная активация

Библиотека Waypoints позволяет реагировать на появление элементов на экране при скролле страницы. Условная активация — это механизм, при котором обработчик срабатывает только при выполнении определённых условий, например, когда элемент виден определённую часть или когда пользователь прокрутил страницу до конкретного положения.

Создание базового Waypoint с условием

Для начала создаётся обычный Waypoint:

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    console.log('Элемент достигнут!', direction);
  }
});

Чтобы добавить условие активации, можно использовать проверку внутри обработчика:

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    if (window.scrollY > 500) {  // срабатывает только если прокрутка > 500px
      console.log('Условие выполнено: прокрутка больше 500px');
    }
  }
});

В этом примере событие handler вызывается при достижении элемента, но фактическое действие выполняется только если выполнено условие window.scrollY > 500.

Использование offset для динамических условий

Свойство offset позволяет настроить точку активации Waypoint относительно начала страницы или контейнера:

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    console.log('Waypoint активирован в направлении', direction);
  },
  offset: '75%'  // срабатывает, когда верх элемента достигает 75% высоты окна
});

Важный момент: offset может быть числом (пиксели) или строкой с процентом, что позволяет гибко управлять условной активацией в зависимости от размера окна или расположения элемента.

Ограничение срабатывания события

Waypoints поддерживает опцию once, которая гарантирует одноразовое срабатывание обработчика:

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    console.log('Событие сработало один раз');
  },
  offset: '50%',
  enabled: true
});

waypoint.disable(); // можно отключить waypoint после срабатывания

Если требуется более сложная логика, можно комбинировать enabled/disable с проверкой внутри handler:

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    if (direction === 'down' && window.innerWidth > 768) {
      console.log('Условие выполнено: скролл вниз на большом экране');
      this.disable();
    }
  }
});

Множественные условия активации

Для случаев, когда элемент должен активироваться при нескольких условиях одновременно, проверка внутри handler может быть составной:

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    var isVisible = this.element.getBoundingClientRect().top < window.innerHeight;
    var userScrolledEnough = window.scrollY > 300;

    if (isVisible && userScrolledEnough) {
      console.log('Элемент виден и прокрутка > 300px');
    }
  },
  offset: '0%'
});

Такой подход позволяет создавать сложные интерактивные эффекты, например, запуск анимации только если элемент полностью виден на экране и пользователь уже прокрутил страницу на заданное расстояние.

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

Если элементы подгружаются динамически (например, через AJAX), необходимо пересоздавать Waypoints после добавления новых элементов:

function initializeWaypoints() {
  document.querySelectorAll('.dynamic-item').forEach(function(el) {
    new Waypoint({
      element: el,
      handler: function() {
        console.log('Динамический элемент достигнут');
      },
      offset: '80%'
    });
  });
}

// После загрузки новых элементов
initializeWaypoints();

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

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

  • Анимация при прокрутке: запуск CSS-анимации только если элемент полностью виден и пользователь скроллит вниз.
  • Ленивая подгрузка: отображение изображений или видео при достижении определённого положения.
  • Изменение интерфейса: фиксирование меню или подсветка секций, если выполнены условия видимости и направления скролла.

Условная активация в Waypoints — это комбинация offset, направления скролла, проверок состояния элемента и возможностей включения/отключения Waypoint. Этот подход позволяет создавать высоко адаптивные интерфейсы, которые реагируют только при необходимости и повышают производительность страниц.

Оглавление