Базовые стили для шапки

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

Структура HTML шапки

Простейшая структура шапки для Headroom.js выглядит так:

<header class="header">
  <nav class="nav">
    <ul class="nav__list">
      <li class="nav__item"><a href="#">Главная</a></li>
      <li class="nav__item"><a href="#">О нас</a></li>
      <li class="nav__item"><a href="#">Контакты</a></li>
    </ul>
  </nav>
</header>

Класс .header будет использоваться для привязки Headroom.js и применения базовых стилей.

Базовые стили шапки

Для корректной анимации шапки при прокрутке необходимо определить фиксированное положение, ширину и переходы:

.header {
  position: fixed; /* Фиксируем шапку вверху страницы */
  top: 0;
  left: 0;
  width: 100%; /* Ширина на всю страницу */
  background-color: #ffffff; /* Цвет фона шапки */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкая тень для визуального отделения */
  z-index: 1000; /* Поверх всего контента */
  transition: transform 0.3s ease-in-out; /* Плавное появление/скрытие */
}

Ключевые моменты:

  • position: fixed позволяет шапке оставаться видимой при прокрутке.
  • z-index предотвращает перекрытие контентом.
  • transition обеспечивает плавный эффект скрытия и появления.

Стили для состояний Headroom.js

Headroom.js использует три основных класса для управления состоянием шапки:

  1. headroom--unpinned — шапка скрыта при прокрутке вниз.
  2. headroom--pinned — шапка показана при прокрутке вверх.
  3. headroom--top — шапка в верхней точке страницы.
  4. headroom--not-top — шапка уже прокручена вниз.
.headroom--unpinned {
  transform: translateY(-100%); /* Скрываем шапку вверх */
}

.headroom--pinned {
  transform: translateY(0); /* Показываем шапку */
}

.headroom--top {
  box-shadow: none; /* Убираем тень у верхнего края */
}

.headroom--not-top {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Добавляем тень при прокрутке */
}

Особенности:

  • transform: translateY(-100%) позволяет скрывать шапку без смещения других элементов страницы.
  • transition из базового стиля обеспечивает плавную анимацию при смене состояний.

Настройка высоты и внутренних отступов

Для визуальной консистентности шапки важно определить фиксированную высоту и паддинги:

.header {
  height: 60px; /* Высота шапки */
  line-height: 60px; /* Вертикальное центрирование текста */
  padding: 0 20px; /* Отступы слева и справа */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Пространство между элементами */
}

Советы по верстке навигации:

  • Элементы меню должны быть горизонтально выровнены через flexbox.
  • Для интерактивных элементов использовать cursor: pointer и transition для hover-эффектов.

Адаптивные базовые стили

Для мобильных устройств необходимо учитывать уменьшенные размеры шапки:

@media (max-width: 768px) {
  .header {
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
  }

  .nav__list {
    display: flex;
    flex-direction: column; /* Вертикальный список для мобильных */
  }
}

Ключевой момент: базовые стили должны быть простыми, чтобы не конфликтовать с динамическими классами Headroom.js.

Стили для плавного появления и исчезновения

Для улучшения UX часто добавляют псевдоэффекты прозрачности и тени:

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

.headroom--unpinned {
  opacity: 0.9; /* Легкая прозрачность при скрытии */
}

.headroom--pinned {
  opacity: 1; /* Полная видимость */
}

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

Оглавление