Класс headroom--not-top

В библиотеке Headroom.js класс headroom--not-top используется для отслеживания положения элемента относительно верхней границы окна браузера. Он является одним из служебных классов, автоматически добавляемых к элементу при прокрутке страницы и изменении состояния шапки.

Принцип работы

Headroom.js контролирует положение элемента, к которому привязан, и добавляет или удаляет определённые CSS-классы в зависимости от текущего состояния:

  • headroom--pinned – шапка зафиксирована в верхней части окна.
  • headroom--unpinned – шапка скрыта при прокрутке вниз.
  • headroom--top – страница находится в самом верхнем положении (scrollTop = 0).
  • headroom--not-top – страница прокручена вниз, элемент уже не находится у верхней границы окна.

Класс headroom--not-top появляется только после того, как пользователь прокрутил страницу хотя бы на один пиксель вниз. Его появление сигнализирует, что элемент больше не находится в «нулевой» позиции и можно применять стили для фиксированной шапки.

Применение в CSS

Использование класса headroom--not-top позволяет задавать стили, которые будут применяться, когда элемент перестаёт находиться у верхней границы окна. Например:

.header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.headroom--not-top {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

В этом примере:

  • Когда пользователь прокручивает страницу вниз, .headroom--not-top добавляется к шапке, появляется тень и меняется фон.
  • При возвращении к верхней границе (scrollTop = 0) класс удаляется, и шапка возвращается к исходному стилю.

Интеграция с JavaScript

Для контроля состояния можно использовать методы и события Headroom.js. Класс headroom--not-top генерируется автоматически, но есть возможность реагировать на его появление программно:

const header = document.querySelector('.header');
const headroom = new Headroom(header, {
  offset: 50, // Минимальная прокрутка до активации
  tolerance: {
    up: 5,
    down: 5
  }
});

headroom.init();

header.addEventListener('headroom.notTop', () => {
  console.log('Элемент перестал быть у верхней границы');
});

Событие headroom.notTop позволяет выполнять кастомные действия, такие как анимация, изменение логики навигации или динамическая подгрузка контента.

Совместное использование с другими классами

Класс headroom--not-top часто используется в комбинации с:

  • headroom--pinned – для закрепления шапки при прокрутке вверх.
  • headroom--unpinned – для скрытия шапки при прокрутке вниз.

Пример комбинированного CSS:

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.headroom--unpinned {
  transform: translateY(-100%);
}

.headroom--pinned {
  transform: translateY(0);
}

.headroom--not-top.headroom--pinned {
  background-color: #f8f8f8;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

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

Практические рекомендации

  • Использовать headroom--not-top для визуального разделения шапки и контента при прокрутке.
  • Не полагаться исключительно на этот класс для логики скрытия или показа шапки — для этого лучше применять headroom--pinned и headroom--unpinned.
  • Комбинировать с CSS-переходами для плавной анимации при добавлении и удалении класса.

Класс headroom--not-top позволяет легко различать состояния элемента на странице, обеспечивая гибкую и удобную настройку интерфейса при прокрутке.

Оглавление