Конструктор Waypoint

Конструктор Waypoint является основной точкой входа для создания наблюдателей за элементами на странице. Он позволяет отслеживать положение DOM-элементов относительно области видимости и запускать определённые функции при достижении заданного положения. Синтаксис конструктора выглядит следующим образом:

var waypoint = new Waypoint(options);

где options — объект с настройками.

Основные параметры конструктора

  1. element Обязательный параметр. Ссылка на DOM-элемент или его CSS-селектор, за которым требуется следить.
element: document.getElementById('myElement')
  1. handler Функция, вызываемая при срабатывании waypoint. Получает объект с информацией о направлении (direction), которое может быть 'down' или 'up'.
handler: function(direction) {
    console.log('Waypoint сработал при движении:', direction);
}
  1. offset Определяет расстояние от верхней границы окна браузера, при котором срабатывает waypoint. Может быть задано как число в пикселях или процент от высоты окна.
offset: '50%'      // 50% высоты окна
offset: 200        // 200px от верха
  1. context Элемент, относительно которого определяется положение. По умолчанию — window.
context: document.getElementById('scrollContainer')
  1. enabled Логический флаг, определяющий, активен ли waypoint при создании. По умолчанию true.
enabled: false
  1. group Позволяет объединять несколько waypoint’ов в группу. Группы управляют очередностью срабатывания и могут быть полезны при сложных анимациях или последовательных триггерах.
group: 'stickyElements'
  1. horizontal Если установлено true, waypoint отслеживает горизонтальную прокрутку вместо вертикальной.
horizontal: true

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

Вертикальный waypoint с 100px смещением:

var waypoint = new Waypoint({
    element: document.getElementById('section1'),
    handler: function(direction) {
        console.log('Секция достигнута, направление:', direction);
    },
    offset: 100
});

Waypoint, срабатывающий при прокрутке контейнера:

var waypoint = new Waypoint({
    element: '.item',
    handler: function(direction) {
        this.element.classList.toggle('active', direction === 'down');
    },
    context: document.getElementById('scrollContainer')
});

Горизонтальный waypoint:

var waypoint = new Waypoint({
    element: document.getElementById('slide'),
    handler: function(direction) {
        console.log('Слайд достигнут:', direction);
    },
    horizontal: true
});

Методы экземпляра Waypoint

  1. enable() Включает waypoint, если он был отключен.
waypoint.enable();
  1. disable() Отключает waypoint, предотвращая срабатывания.
waypoint.disable();
  1. destroy() Полностью удаляет waypoint и освобождает ресурсы.
waypoint.destroy();
  1. contextRefresh() Обновляет позиции всех waypoint’ов в контексте, полезно при динамическом изменении размеров элементов.
Waypoint.refreshAll();

Свойства объекта Waypoint

  • element — DOM-элемент, за которым следят.
  • adapter — адаптер для взаимодействия с DOM (обычно используется jQuery или встроенный).
  • context — контекст прокрутки.
  • group — группа, к которой принадлежит waypoint.
  • enabled — состояние активности.
  • triggerPoint — текущая координата, при которой waypoint сработает.

Особенности работы конструктора

  • Waypoint рассчитывает положение элемента при инициализации и автоматически обновляет координаты при событии resize окна.
  • Offset может быть динамическим, если задать его в виде функции:
offset: function() {
    return this.element.clientHeight / 2;
}
  • Все waypoint’ы по умолчанию привязаны к вертикальной прокрутке, горизонтальная активация требует явного указания horizontal: true.
  • При срабатывании waypoint передаёт объект direction, что позволяет создавать сложные интерактивные сценарии, например, анимации при прокрутке вверх и вниз.

Группы и последовательность

Waypoint поддерживает концепцию групп. Группа собирает несколько waypoint’ов и управляет их порядком срабатывания. Это особенно полезно для последовательной анимации элементов:

var wp1 = new Waypoint({
    element: '#item1',
    handler: function(direction) {
        console.log('Item 1', direction);
    },
    group: 'itemsGroup'
});

var wp2 = new Waypoint({
    element: '#item2',
    handler: function(direction) {
        console.log('Item 2', direction);
    },
    group: 'itemsGroup'
});

// Все waypoint'ы в 'itemsGroup' будут срабатывать в порядке очереди

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

  • Для большого количества элементов рекомендуется использовать делегирование или объединять waypoint’ы в группы, чтобы снизить нагрузку.
  • Важно вызывать Waypoint.refreshAll() после динамического изменения DOM, чтобы корректно пересчитать позиции элементов.
  • Горизонтальные waypoint’ы и использование кастомных контекстов требуют тщательного тестирования, так как браузеры могут по-разному обрабатывать горизонтальную прокрутку.

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

Оглавление