Кастомные стили для липких элементов

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

При инициализации Stickybits можно указать собственные классы через опцию stickyBitStickyClass, а также класс для состояния, когда элемент достигает дна контейнера — stickyBitStoppedClass. Это позволяет полностью отделить стилизацию от поведения скрипта, управляя внешним видом через CSS.

stickybits('.sticky-element', {
  stickyBitStickyClass: 'is-sticky',
  stickyBitStoppedClass: 'is-stopped',
  useStickyClasses: true
});

После этого элемент получает класс is-sticky при переходе в липкое состояние и is-stopped, когда он достиг нижней границы родительского контейнера. Это позволяет добавлять любые CSS-анимации, тени, изменения цвета или трансформации, не вмешиваясь в логику JavaScript.

Использование псевдоклассов и анимаций

Кастомные стили можно расширять с помощью CSS-псевдоклассов и анимаций. Например, при добавлении класса is-sticky можно плавно изменять фон или масштаб элемента:

.sticky-element {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.sticky-element.is-sticky {
  background-color: #f0f0f0;
  transform: scale(1.05);
}

.sticky-element.is-stopped {
  background-color: #ccc;
  transform: scale(1);
}

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

Настройка offset и точек срабатывания

Stickybits позволяет задавать смещение от верхнего края через опцию stickyBitStickyOffset. Это важно для элементов, которые не должны прилипать строго к верху окна, например, при наличии фиксированного хедера. В сочетании с кастомными стилями можно сделать «плавающий» эффект с динамическим изменением визуальной презентации:

stickybits('.sticky-element', {
  stickyBitStickyOffset: 20,
  stickyBitStickyClass: 'is-sticky-offset',
  useStickyClasses: true
});

.sticky-element.is-sticky-offset {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

Стилизация при взаимодействии с другими библиотеками

Stickybits хорошо сочетается с CSS-фреймворками и библиотеками анимации, такими как Animate.css или GSAP. При этом можно привязывать анимационные классы к состояниям элемента:

stickybits('.sticky-element', { useStickyClasses: true });

const element = document.querySelector('.sticky-element');

element.addEventListener('stickybit:stick', () => {
  element.classList.add('animate__fadeInDown');
});

element.addEventListener('stickybit:unstick', () => {
  element.classList.remove('animate__fadeInDown');
});

События stickybit:stick и stickybit:unstick открывают возможность полностью управлять кастомными анимациями, добавляя динамику и отзывчивость интерфейсу.

Комбинирование нескольких классов и медиа-запросов

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

@media (max-width: 768px) {
  .sticky-element.is-sticky {
    transform: scale(1);
    background-color: #fff;
  }
}

@media (min-width: 769px) {
  .sticky-element.is-sticky {
    transform: scale(1.05);
    background-color: #f9f9f9;
  }
}

Это позволяет сохранять консистентность дизайна на мобильных и десктопных устройствах, управляя только стилями без изменения логики Stickybits.

Использование кастомных атрибутов для стилизации

Кроме классов, можно использовать кастомные атрибуты для более гибкой интеграции с CSS:

stickybits('.sticky-element', {
  useStickyClasses: false
});

const element = document.querySelector('.sticky-element');

window.addEventListener('scroll', () => {
  const rect = element.getBoundingClientRect();
  if (rect.top <= 0) {
    element.setAttribute('data-sticky', 'true');
  } else {
    element.setAttribute('data-sticky', 'false');
  }
});

.sticky-element[data-sticky="true"] {
  background-color: #eaeaea;
  border-left: 4px solid #007BFF;
}

Такой подход позволяет полностью отделить CSS от библиотечных классов и создавать уникальные визуальные эффекты без вмешательства в внутренние классы Stickybits.