Полный список CSS-классов

Библиотека Headroom.js управляет поведением шапки сайта при скролле, скрывая её при прокрутке вниз и показывая при прокрутке вверх. Для управления состояниями шапки используются специальные CSS-классы, которые автоматически добавляются и удаляются библиотекой в зависимости от положения страницы и направления прокрутки.

1. headroom

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

Пример использования:

.headroom {
    transition: transform 0.25s ease-in-out;
    will-change: transform;
    z-index: 1000;
}

Ключевой момент: необходимо задать transition, иначе анимация скрытия и появления будет резкой.

2. headroom--pinned

Присваивается, когда шапка фиксируется в верхней части экрана. Это состояние возникает, когда пользователь скроллит страницу вверх после того, как шапка была скрыта. Класс headroom--pinned позволяет стилизовать шапку в момент её видимости.

Пример использования:

.headroom--pinned {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Здесь transform: translateY(0) возвращает шапку в видимую позицию, а тень создаёт визуальный эффект отделения шапки от контента.

3. headroom--unpinned

Присваивается, когда шапка скрывается во время прокрутки вниз. Класс используется для анимации исчезновения шапки и может быть комбинирован с CSS-трансформациями.

Пример использования:

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

Ключевой момент: -100% означает полное скрытие шапки за пределами видимой области, а плавность движения обеспечивается через transition, заданный для базового класса headroom.

4. headroom--top

Присваивается, когда пользователь находится в верхней части страницы (scrollTop равен 0). Часто используется для изменения стиля шапки на начальном экране, например, для прозрачной версии шапки.

Пример использования:

.headroom--top {
    background-color: transparent;
}

Это позволяет реализовать эффекты смены фона или текста шапки в зависимости от положения страницы.

5. headroom--not-top

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

Пример использования:

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

6. headroom--bottom

Присваивается, когда пользователь достиг нижней части страницы. Используется редко, но позволяет реализовать специальные эффекты, например, фиксацию шапки при достижении footer.

Пример использования:

.headroom--bottom {
    border-top: 1px solid #ccc;
}

7. headroom--not-bottom

Присваивается, когда пользователь не находится на нижней границе страницы. Может использоваться для отмены стилей, добавленных через headroom--bottom.

Пример использования:

.headroom--not-bottom {
    border-top: none;
}

Советы по работе с классами

  1. Комбинирование классов Часто состояния пересекаются, например, шапка может быть одновременно headroom--pinned и headroom--not-top. Для правильной визуализации важно учитывать приоритетность CSS-селекторов.

  2. Анимация через transition и transform Главный механизм плавного скрытия и появления шапки — это CSS-свойство transform вместе с transition. Избегайте анимации через top или margin, так как это снижает производительность на мобильных устройствах.

  3. Отдельные состояния для мобильных и десктопов Для мобильных устройств можно создавать отдельные правила для классов Headroom, чтобы контролировать размеры шапки и скорость её скрытия, используя медиазапросы.

  4. Отслеживание scrollTop Классы headroom--top и headroom--not-top позволяют реализовать динамическую смену стиля в зависимости от положения скролла без дополнительного JS, полностью полагаясь на CSS.

  5. Наследование и каскад Всегда добавляйте базовый стиль для .headroom и дополняйте его модификаторами (--pinned, --unpinned). Это позволяет централизованно управлять анимацией и основными свойствами шапки.

Оглавление