Селекторы элементов

В библиотеке Stickybits работа с элементами начинается с их выбора через селекторы. Stickybits не предоставляет собственный API для поиска элементов в DOM, поэтому она опирается на стандартные методы JavaScript, такие как document.querySelector и document.querySelectorAll.

Использование CSS-селекторов

CSS-селекторы позволяют точно указать элементы, к которым будет применяться эффект «липкости». Stickybits принимает строку селектора в качестве аргумента при инициализации:

import Stickybits from 'stickybits';

const sticky = Stickybits('.sticky-element');

В этом примере .sticky-element — класс элемента, который должен стать липким. Библиотека автоматически применяет необходимые стили и управление поведением при скролле.

Селекторы по идентификатору: #header
Селекторы по классу: .menu
Селекторы по тегу: header, section
Комбинированные селекторы: .menu li.active

Важно, что Stickybits поддерживает множественный выбор элементов, если используется document.querySelectorAll. Библиотека создаёт отдельный экземпляр для каждого найденного элемента.

Прямое использование DOM-элементов

Помимо строковых селекторов, Stickybits может работать напрямую с элементами, переданными как NodeList или массив:

const elements = document.querySelectorAll('.sticky-item');
const sticky = Stickybits(elements);

В этом случае библиотека обрабатывает каждый элемент из NodeList, добавляя ему стили и управление поведением при скролле.

Атрибуты и кастомные селекторы

Stickybits можно применять к элементам с любыми атрибутами. Например, можно сделать липкими только те элементы, которые имеют data-sticky="true":

Stickybits('[data-sticky="true"]');

Это удобно для динамического HTML, где элементы создаются программно или подгружаются через API. С помощью атрибутов можно гибко управлять тем, какие элементы становятся липкими, не изменяя классы или ID.

Особенности работы с вложенными элементами

Если требуется закрепить элемент внутри контейнера, который сам является частью более сложного DOM, селекторы можно комбинировать:

Stickybits('.container .sticky-element');

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

Множественные селекторы

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

Stickybits('.header, .sidebar, .footer');

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

Динамическое добавление элементов

Если элементы создаются динамически после инициализации Stickybits, необходимо заново инициализировать библиотеку для этих элементов или использовать наблюдатели (MutationObserver), чтобы применить sticky-эффект:

const observer = new MutationObserver(() => {
  Stickybits('.new-sticky');
});

observer.observe(document.body, { childList: true, subtree: true });

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

Ограничения селекторов

Нельзя передавать в Stickybits строки, которые не являются валидными CSS-селекторами.
Элементы должны существовать в DOM на момент инициализации, иначе библиотека их не обработает.
NodeList или массивы должны содержать только DOM-элементы; передача других объектов приведёт к ошибке.