Использование вместе с sticky positioning

Headroom.js — это библиотека для управления видимостью верхней панели при скролле страницы. При интеграции с элементами, использующими CSS position: sticky, важно учитывать специфику поведения таких элементов: sticky-панель остаётся в пределах родительского контейнера и реагирует на скролл относительно его границ, а не всей страницы.

Ключевой момент: Headroom.js оперирует изменением классов headroom--pinned и headroom--unpinned в зависимости от направления скролла. Sticky-элементы могут конфликтовать с этими классами, если не учесть их родительскую область и смещение (offset).

Настройка sticky-панели с Headroom.js

  1. HTML-разметка:
<header class="site-header sticky-header">
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О проекте</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>Контент 1</section>
  <section>Контент 2</section>
</main>

Класс sticky-header задаёт элементу position: sticky через CSS.

  1. CSS для sticky:
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}
.headroom--unpinned {
  transform: translateY(-100%);
}
.headroom--pinned {
  transform: translateY(0);
}

Выделенные моменты:

  • top: 0 задаёт точку, от которой элемент становится фиксированным.
  • z-index гарантирует нахождение панели поверх контента.
  • Переход transform плавно скрывает и показывает панель.

Инициализация Headroom.js для sticky

const header = document.querySelector('.sticky-header');
const headroom = new Headroom(header, {
  offset: 50,         // Начало отслеживания после скролла на 50px
  tolerance: {        // Настройка «чувствительности» к скроллу
    up: 5,
    down: 10
  },
  classes: {
    pinned: 'headroom--pinned',
    unpinned: 'headroom--unpinned'
  }
});
headroom.init();

Особенности для sticky-панели:

  • offset нужно выбирать с учётом высоты самой панели и верхнего отступа родителя.
  • tolerance предотвращает постоянное переключение классов при микросколлах.
  • Sticky-панель может иметь визуальный конфликт с transform, поэтому проверяется, не перекрывает ли transform поведение position: sticky.

Работа с вложенными sticky-элементами

Если внутри sticky-панели есть элементы, которые также используют position: sticky (например, подменю), стоит учитывать, что Headroom.js управляет только внешним контейнером. Для корректной работы:

  • Установить top на вложенные sticky-элементы, чтобы они правильно позиционировались при скрытии родителя.
  • Использовать CSS transform только на внешней панели. Внутренние элементы сохраняют собственный sticky-поток.
.submenu {
  position: sticky;
  top: 60px; /* учитывая высоту родителя */
}

Решение типовых проблем

  1. Проблема: панель «дергается» при скролле. Причина: пересечение offset и sticky top. Решение: скорректировать offset в Headroom.js, чтобы оно начиналось после полного закрепления панели.

  2. Проблема: sticky не работает при применении transform. Причина: CSS transform создаёт новый контекст наложения, что может нарушать sticky. Решение: применять transform только на видимую часть панели (headroom--unpinned) и проверять родительский контекст.

  3. Проблема: панель перекрывает контент. Решение: добавить верхний padding родителю или main-контейнеру, равный высоте панели:

main {
  padding-top: 80px;
}

Рекомендации по оптимизации

  • Использовать will-change: transform для smoother-анимаций скрытия/появления панели.
  • При адаптивном дизайне пересчитывать offset и top в зависимости от размеров экрана.
  • Для крупных страниц можно комбинировать Headroom.js с Intersection Observer для более точного отслеживания элементов, скрытых за sticky-панелью.

Итоговая схема поведения

  1. Sticky-панель закрепляется при достижении top родителя.
  2. Headroom.js отслеживает направление скролла и применяет классы headroom--pinned / headroom--unpinned.
  3. Взаимодействие transform и sticky требует корректировки offset, top и контекста наложения.
  4. Вложенные sticky-элементы должны учитывать смещение родителя при скрытии внешней панели.

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

Оглавление