Управление состоянием

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

Создание Waypoint и базовое управление состоянием

Для начала необходимо создать Waypoint, передав ему элемент и объект с опциями:

var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    if (direction === 'down') {
      this.element.classList.add('active');
    } else {
      this.element.classList.remove('active');
    }
  },
  offset: '50%'
});

Ключевые моменты:

  • element — DOM-элемент, за которым будет следить Waypoint.
  • handler — функция, вызываемая при пересечении точки. Параметр direction указывает направление движения: down (вниз) или up (вверх).
  • offset — смещение от верхней границы окна, при котором срабатывает Waypoint. Может быть в пикселях или процентах.

В примере класс active добавляется к элементу при прокрутке вниз и удаляется при прокрутке вверх, что является простейшим способом управления состоянием.

Метод enable() и disable()

Waypoints поддерживают динамическое включение и отключение:

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

Это полезно, когда требуется временно блокировать обновление состояния элемента, например, при анимации или загрузке контента.

Метод destroy()

Удаляет Waypoint и освобождает ресурсы:

waypoint.destroy();

После вызова destroy() событие больше не будет отслеживаться, и handler не будет вызываться.

Контроль состояния с помощью Context

Waypoints работают в рамках контекста, который по умолчанию — окно браузера (window). Контекст можно задать вручную:

var waypoint = new Waypoint({
  element: document.getElementById('section2'),
  handler: function(direction) {
    this.element.classList.toggle('visible', direction === 'down');
  },
  context: document.getElementById('scrollableContainer'),
  offset: '75%'
});

Особенности:

  • context позволяет отслеживать положение элемента относительно любого прокручиваемого контейнера.
  • Управление состоянием элементов становится более гибким при работе с внутренними скроллами.

Применение группы Waypoints для сложного управления

Waypoints позволяют объединять несколько точек в группу для коллективного управления:

var sectionWaypoints = [];
document.querySelectorAll('.section').forEach(function(section) {
  var wp = new Waypoint({
    element: section,
    handler: function(direction) {
      section.classList.toggle('highlight', direction === 'down');
    },
    offset: '50%'
  });
  sectionWaypoints.push(wp);
});

Использование групп облегчает:

  • массовое включение/отключение Waypoints (Waypoint.Group.findOrCreate({ name: 'sections' }))
  • управление активными состояниями нескольких элементов одновременно
  • создание скролл-анимаций на страницах с множеством блоков

Динамическое изменение состояния с setOffset

Состояние Waypoint можно изменять на лету через метод setOffset:

waypoint.setOffset('30%');

Это полезно для адаптивного интерфейса, где положение точки срабатывания зависит от размера окна или контента.

Примеры сложного управления состоянием

  1. Фиксирование меню при прокрутке
var menuWaypoint = new Waypoint({
  element: document.getElementById('menu-trigger'),
  handler: function(direction) {
    document.querySelector('nav').classList.toggle('fixed', direction === 'down');
  },
  offset: '0'
});
  1. Анимация блоков при попадании в viewport
var animateWaypoint = new Waypoint({
  element: document.querySelector('.animate-section'),
  handler: function(direction) {
    if (direction === 'down') {
      this.element.classList.add('animate');
      this.destroy(); // срабатывает только один раз
    }
  },
  offset: '80%'
});
  1. Управление состоянием нескольких элементов одновременно
var group = Waypoint.Group.findOrCreate({ name: 'feature-sections' });

document.querySelectorAll('.feature').forEach(function(feature) {
  new Waypoint({
    element: feature,
    group: group.name,
    handler: function(direction) {
      feature.classList.toggle('active', direction === 'down');
    },
    offset: '60%'
  });
});

Использование групп позволяет централизованно включать/отключать все Waypoints внутри одного набора или менять их логику.

Практические советы по управлению состоянием

  • Использовать классы CSS для визуального состояния вместо прямого манипулирования стилями через JavaScript. Это упрощает поддержку кода.
  • Для элементов с динамическим контентом создавать Waypoints после полной загрузки DOM или после изменения структуры страницы.
  • Объединять похожие Waypoints в группы для упрощения управления и уменьшения числа повторяющихся обработчиков.
  • Использовать destroy() для одноразовых анимаций, чтобы экономить ресурсы и избегать лишних вызовов handler.
  • Тестировать offset на разных разрешениях экрана, особенно при адаптивном дизайне.

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

Оглавление