Zepto адаптер

Waypoints — это библиотека для отслеживания положения элементов на странице относительно области просмотра (viewport). В стандартной версии Waypoints использует jQuery для работы с DOM, однако с помощью Zepto адаптера можно подключить библиотеку к проектам, где jQuery отсутствует. Zepto — облегчённая библиотека с API, совместимым с jQuery, что позволяет использовать Waypoints без дополнительного веса jQuery.

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

  • Совместимость с методами DOM: .offset(), .height(), .outerHeight() и .scrollTop().
  • Поддержка событий: .on() и .off() для назначения обработчиков.
  • Эмуляция некоторых jQuery методов: например, .each(), .data() и .trigger().

Для подключения Zepto адаптера необходимо убедиться, что Zepto загружен до Waypoints и что подключён соответствующий файл адаптера jquery.waypoints.js или отдельный Zepto-адаптер zepto.waypoints.js.

Подключение и инициализация Waypoints с Zepto

Пример подключения:

<script src="zepto.min.js"></script>
<script src="waypoints.min.js"></script>
<script src="zepto.waypoints.js"></script>

После подключения библиотек создаётся объект Waypoint:

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

Пояснения к параметрам:

  • element — DOM-элемент, к которому привязан waypoint.
  • handler — функция обратного вызова, вызываемая при пересечении точки с элементом.
  • offset — смещение от верхнего края viewport, где срабатывает waypoint. Может быть в пикселях или процентах.

Работа с прокруткой и событиями

Waypoints с Zepto корректно отслеживает вертикальную и горизонтальную прокрутку. Для вертикальных срабатываний важно, чтобы Zepto корректно возвращал значение .scrollTop() у window и контейнеров с прокруткой.

Пример наблюдения за прокруткой внутри блока:

var scrollContainer = $('#scrollable');

var waypoint = new Waypoint({
  element: $('#target')[0],
  handler: function(direction) {
    console.log('Waypoint сработал внутри контейнера:', direction);
  },
  context: scrollContainer,
  offset: '25%'
});
  • context — контейнер с прокруткой, по умолчанию window.
  • Внутри контекста offset считается относительно видимой области этого контейнера.

Настройка поведения Waypoints

1. Множественные точки для одного элемента: Можно создавать несколько waypoint для одного элемента с разными смещениями:

new Waypoint({
  element: $('#section1')[0],
  handler: function(direction) { console.log('Верх'); },
  offset: '0%'
});

new Waypoint({
  element: $('#section1')[0],
  handler: function(direction) { console.log('Середина'); },
  offset: '50%'
});

2. Группировка waypoint: Waypoints можно объединять в группы для синхронного управления обработкой событий:

Waypoint.Group.add({
  name: 'mainGroup',
  handlers: []
});

Группы позволяют:

  • Отключать/включать набор waypoint одновременно.
  • Контролировать порядок срабатывания при быстром скролле.

3. Вертикальные и горизонтальные waypoint: Waypoints поддерживает направление vertical (по умолчанию) и horizontal:

var horizontalWaypoint = new Waypoint({
  element: $('#horizontalElement')[0],
  handler: function(direction) { console.log('Горизонтальная точка'); },
  horizontal: true,
  offset: '30%'
});

Использование дополнительных методов Zepto адаптера

Waypoints полагается на методы Zepto, которые должны возвращать значения, совместимые с jQuery:

  • .offset() — возвращает объект { top: Number, left: Number }.
  • .height() и .outerHeight() — высота элемента без/с отступами.
  • .scrollTop() — возвращает текущую позицию прокрутки.
  • .on(event, handler) — назначение обработчика события.
  • .off(event, handler) — удаление обработчика.
  • .trigger(event) — программная генерация события.

Если какой-либо метод Zepto отличается от jQuery по поведению, адаптер автоматически корректирует вызовы для совместимости с Waypoints.

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

Waypoints активно отслеживает события скролла и ресайза. Для проектов с Zepto важно:

  • Минимизировать количество waypoint на странице.
  • Использовать continuous: false для waypoint, которые не должны срабатывать при каждом пикселе прокрутки.
  • Группировать waypoint для уменьшения нагрузки на обработчики событий.
  • Использовать throttle или debounce при сложной логике в handler.
var waypoint = new Waypoint({
  element: $('#section1')[0],
  handler: function(direction) {
    console.log('Waypoint с throttling');
  },
  offset: '75%',
  continuous: false
});

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

$('#sections .section').each(function(index, el) {
  new Waypoint({
    element: el,
    handler: function(direction) {
      $(el).toggleClass('active', direction === 'down');
      console.log('Section', index, 'активирован');
    },
    offset: '50%'
  });
});

var containerWaypoint = new Waypoint({
  element: $('#stickyHeader')[0],
  handler: function(direction) {
    $('#stickyHeader').toggleClass('fixed', direction === 'down');
  },
  offset: 0
});
  • .toggleClass() — добавляет или удаляет класс в зависимости от направления прокрутки.
  • each() в Zepto корректно обходят все выбранные элементы.
  • Комбинирование глобальных и локальных waypoint позволяет создавать сложные интерфейсы с фиксацией элементов, анимацией и lazy-load.
Оглавление