Возвращаемые значения

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

Объект Stickybits

При создании новой экземпляра Stickybits через функцию:

const sticky = stickybits('.element', options);

возвращается массив объектов, каждый из которых соответствует выбранному DOM-элементу. Каждый объект имеет следующие свойства:

  • el — ссылка на DOM-элемент, к которому применён sticky.
  • parent — родительский контейнер элемента, обычно используется для расчета границ скролла.
  • stickyClass — класс, который добавляется элементу при активации sticky.
  • stuckClass — класс, применяемый, когда элемент находится в “прилипшем” состоянии.
  • stickyStart — числовое значение, указывающее вертикальную координату начала прилипания.
  • stickyStop — координата конца sticky, после которой элемент возвращается в обычный поток.
  • state — текущий статус элемента, возможные значения: 'default', 'sticky', 'stuck'.

Пример доступа к состоянию элемента:

console.log(sticky[0].state); // 'default' или 'sticky'

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

Объект Stickybits содержит несколько методов, возвращающих информацию о состоянии или влияющих на поведение:

  1. update()
sticky[0].update();

Метод пересчитывает позиции прилипания и размеры контейнера. Возвращаемое значение — тот же объект Stickybits, что позволяет использовать цепочку вызовов.

  1. cleanup()
sticky[0].cleanup();

Удаляет все классы и inline-стили, восстановливая элемент в исходное состояние. Возвращает массив объектов Stickybits, аналогичный изначальному.

  1. addState(stateName)

Позволяет вручную установить состояние элемента:

sticky[0].addState('sticky');

Возвращаемое значение — текущий объект, что удобно для дальнейших операций.

  1. removeState(stateName)

Удаляет указанное состояние и возвращает объект с обновлённым свойством state.

Цепочка вызовов

Stickybits поддерживает методологию chaining, так как большинство методов возвращают либо объект Stickybits, либо массив объектов. Это позволяет писать компактный код:

stickybits('.element')
  .update()
  .addState('sticky');

В этом примере update() возвращает объект Stickybits, на котором сразу вызывается addState().

Информация о DOM через возвращаемый объект

Каждый объект, возвращаемый Stickybits, содержит полезные данные для программного контроля:

  • el.getBoundingClientRect() — позволяет получать точные координаты элемента.
  • parent.offsetHeight — высота родителя, критична для вычислений stickyStart и stickyStop.
  • state — текущее состояние, удобно использовать для условной логики в скриптах.

Возврат массива vs одиночный объект

  • Если селектор CSS возвращает несколько элементов, Stickybits возвращает массив объектов.
  • Если селектор один, библиотека всё равно возвращает массив из одного объекта. Это важно учитывать, чтобы избежать ошибок при доступе к свойствам:
const stickySingle = stickybits('#header');
console.log(stickySingle[0].state);

Практическое использование возвращаемых значений

  1. Отслеживание изменений состояния при скролле
window.addEventListener('scroll', () => {
  sticky.forEach(item => {
    if(item.state === 'stuck') {
      console.log(`${item.el.id} зафиксирован`);
    }
  });
});
  1. Динамическая подстройка стилей
sticky[0].update();
if(sticky[0].state === 'sticky') {
  sticky[0].el.style.backgroundColor = 'lightblue';
}
  1. Удаление и повторная инициализация

Возврат массива объектов позволяет легко делать cleanup и затем заново активировать Stickybits без утечки памяти:

sticky.forEach(item => item.cleanup());
sticky = stickybits('.element');

Возвращаемые значения Stickybits являются фундаментом для построения логики работы с элементами на странице. Знание структуры объекта и доступных методов позволяет не только управлять состояниями, но и интегрировать sticky-элементы с динамическим интерфейсом и анимациями.

Оглавление