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

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

element

Описание: Обязательный параметр, указывающий HTML-элемент, который будет становиться липким.

Тип: HTMLElement или селектор string.

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

var sticky = new Waypoint.Sticky({
  element: document.getElementById('navbar')
});

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

  • Элемент должен быть блочным и иметь заданную ширину, иначе поведение может быть некорректным.
  • Важно учитывать родительский контейнер: элемент останется в пределах родителя и не выйдет за его границы.

wrapper

Описание: Определяет контейнер, в который оборачивается липкий элемент автоматически. Это необходимо для сохранения исходного потока документа и корректного позиционирования.

Тип: HTMLElement или селектор string. По умолчанию: Waypoints создаёт собственный <div>-обёртку.

Пример:

var sticky = new Waypoint.Sticky({
  element: document.getElementById('sidebar'),
  wrapper: document.getElementById('sidebar-wrapper')
});

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

  • Использование собственного wrapper позволяет интегрировать липкий элемент в существующую структуру страницы.
  • Высота обёртки автоматически подстраивается под элемент, предотвращая “скачок” контента при фиксации.

stuckClass

Описание: CSS-класс, который добавляется к элементу при его фиксации.

Тип: string По умолчанию: 'stuck'

Пример:

var sticky = new Waypoint.Sticky({
  element: document.querySelector('.header'),
  stuckClass: 'is-sticky'
});

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

  • Позволяет применять стили только в момент фиксации (например, изменение фона, тени или анимации).
  • Можно использовать несколько классов через пробел, но рекомендуется один основной класс для упрощения CSS.

offset

Описание: Определяет точку активации липкого элемента относительно верхней границы окна просмотра.

Тип: number (в пикселях) или function, возвращающая число. По умолчанию: 0

Примеры:

var sticky = new Waypoint.Sticky({
  element: document.getElementById('menu'),
  offset: 100  // элемент становится липким, когда верх окна прокрутки достигнет 100px
});
var sticky = new Waypoint.Sticky({
  element: document.getElementById('menu'),
  offset: function() {
    return this.element.clientHeight; // активация после полной высоты элемента
  }
});

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

  • Можно использовать отрицательные значения, чтобы элемент фиксировался выше точки видимости.
  • Функциональный offset полезен при адаптивной верстке, когда размеры элементов зависят от ширины экрана.

stuck

Описание: Колбэк-функция, вызываемая при фиксации элемента.

Тип: function

Пример:

var sticky = new Waypoint.Sticky({
  element: document.getElementById('nav'),
  stuck: function() {
    console.log('Элемент зафиксирован');
  }
});

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

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

unstuck

Описание: Колбэк, вызываемый при возвращении элемента в нормальное положение после того, как он перестал быть липким.

Тип: function

Пример:

var sticky = new Waypoint.Sticky({
  element: document.getElementById('nav'),
  unstuck: function() {
    console.log('Элемент больше не липкий');
  }
});

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

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

direction

Описание: Указывает направление прокрутки, при котором элемент становится липким.

Тип: 'down' | 'up' | 'both' По умолчанию: 'down'

Пример:

var sticky = new Waypoint.Sticky({
  element: document.getElementById('header'),
  direction: 'both'
});

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

  • 'down' — элемент фиксируется при прокрутке вниз.
  • 'up' — фиксируется при прокрутке вверх.
  • 'both' — фиксируется при обоих направлениях, чаще используется для меню, которое должно оставаться на экране при движении страницы в любом направлении.

Взаимодействие с родительскими элементами

  • Липкий элемент не выходит за пределы родителя. Высота родителя должна быть больше высоты липкого элемента.
  • Если родитель имеет overflow: hidden или overflow: auto, поведение может быть нарушено. Рекомендуется использовать overflow: visible.

Примеры комплексной настройки

var stickySidebar = new Waypoint.Sticky({
  element: document.querySelector('.sidebar'),
  wrapper: document.querySelector('.sidebar-wrapper'),
  stuckClass: 'sidebar-fixed',
  offset: function() {
    return window.innerHeight * 0.2; // фиксация при достижении 20% высоты окна
  },
  stuck: function() {
    console.log('Сайдбар зафиксирован');
  },
  unstuck: function() {
    console.log('Сайдбар вернулся на место');
  },
  direction: 'both'
});
  • Использование функций в offset позволяет создавать адаптивные и динамические точки фиксации.
  • Комбинация stuckClass и колбэков даёт полный контроль над поведением и визуальным состоянием элемента.

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

Оглавление