Хуки и компоненты

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

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!', direction);
  },
  offset: '75%'
});

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

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

Типы Waypoints

Waypoints поддерживает несколько типов контроля:

  1. Classic Waypoint Отслеживает элемент при пересечении контрольной точки.

  2. Sticky Waypoint Позволяет элементу «прилипать» к верхней части окна при прокрутке. Пример:

var sticky = new Waypoint.Sticky({
  element: document.getElementById('sticky-element')
});
  1. Inview Waypoint Отслеживает полное появление элемента в области видимости, с возможностью реагировать на вход и выход.
var inview = new Waypoint.Inview({
  element: document.getElementById('section'),
  enter: function(direction) {
    console.log('Element entered view from', direction);
  },
  exited: function(direction) {
    console.log('Element exited view towards', direction);
  }
});

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

Waypoints предоставляет возможность отключать, включать и уничтожать контрольные точки:

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

Это полезно для оптимизации производительности на больших страницах с множеством элементов.

Использование с jQuery

Waypoints совместим с jQuery, что упрощает работу с множественными элементами:

$('.section').waypoint(function(direction) {
  $(this.element).addClass('active');
}, { offset: '50%' });

Параметр this.element возвращает DOM-узел, на котором сработал waypoint, что позволяет применять стили или анимации индивидуально для каждого элемента.

Расширенные возможности

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

var group = new Waypoint.Group({
  name: 'section-group'
});

Continuous Mode: по умолчанию Waypoints срабатывает только один раз при пересечении точки. Можно включить режим непрерывного срабатывания, чтобы обработчик вызывался каждый кадр при нахождении элемента в области видимости.

Horizontal Scrolling: Waypoints поддерживает горизонтальную прокрутку через свой параметр horizontal: true.

Производительность

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

  • Использовать offset в процентах, чтобы избежать постоянного пересчета пикселей.
  • Динамически включать и отключать waypoint’ы для элементов вне видимости.
  • Использовать группы Waypoints для объединенного управления событиями.

Применение в компонентах

Waypoints часто интегрируется в UI-компоненты для:

  • Подсветки текущей секции в меню навигации.
  • Анимаций при появлении элементов на странице.
  • Создания липких заголовков и боковых панелей.
  • Ленивой загрузки изображений или блоков контента.

Пример комбинации с анимацией при скролле:

var sections = document.querySelectorAll('.animate-section');

sections.forEach(function(section) {
  new Waypoint({
    element: section,
    handler: function(direction) {
      section.classList.add('fade-in');
    },
    offset: '80%'
  });
});

Здесь при пересечении 80% окна элемент получает класс fade-in, запускающий CSS-анимацию.

Взаимодействие с современными фреймворками

Waypoints можно использовать с React, Vue или Angular, оборачивая компонент или элемент в эффект, который создает waypoint при монтировании:

useEffect(() => {
  const waypoint = new Waypoint({
    element: ref.current,
    handler: (direction) => console.log(direction),
    offset: '70%'
  });
  return () => waypoint.destroy();
}, []);

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

Оглавление