Компактная версия навигации

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

Библиотека работает с любым элементом DOM, который можно позиционировать фиксированно или абсолютно. Основной принцип работы — отслеживание положения страницы и применение CSS-классов для управления состояниями: видимый (headroom--pinned) и скрытый (headroom--unpinned).

var header = document.querySelector(".header");
var headroom = new Headroom(header);
headroom.init();

В этом примере элемент с классом .header становится «умным» заголовком: он будет скрываться при прокрутке вниз и появляться при прокрутке вверх.

Настройка параметров

Headroom.js предоставляет гибкие настройки для точной настройки поведения навигации. Основные параметры:

  • tolerance – определяет количество пикселей, которое пользователь должен проскроллить, чтобы триггерить изменение состояния.

    tolerance: { up: 5, down: 10 }

  • offset – смещение от верхней границы страницы, после которого библиотека начинает отслеживать прокрутку.

    offset: 50

  • classes – объект, в котором можно задать собственные классы для разных состояний:

    classes: {
  initial: "header--initialized",
  pinned: "header--visible",
  unpinned: "header--hidden"
}

Параметры tolerance и offset позволяют настроить более мягкое или резкое поведение скрытия/показа шапки. Например, при больших сайтах с длинными страницами рекомендуется увеличить offset, чтобы шапка не реагировала на каждое движение.

Подключение и инициализация

Headroom.js можно использовать через CDN или установку через npm:

<script src="https://unpkg.com/headroom.js@0.12.0/dist/headroom.min.js"></script>

Для npm:

npm install headroom.js

Инициализация после подключения выглядит одинаково для всех вариантов:

var header = document.querySelector("header");
var headroom = new Headroom(header, {
  tolerance: 5,
  offset: 100,
  classes: {
    initial: "animated-header",
    pinned: "slideDown",
    unpinned: "slideUp"
  }
});
headroom.init();

Здесь slideDown и slideUp — CSS-анимации, которые плавно скрывают и показывают меню.

Создание компактной навигации

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

HTML-структура:

<header class="header">
  <div class="logo">LOGO</div>
  <nav class="nav">
    <a href="#">Главная</a>
    <a href="#">О нас</a>
    <a href="#">Контакты</a>
  </nav>
</header>

CSS-анимации для компактной шапки:

.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  background: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
}

.header--pinned {
  height: 60px;
}

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

При прокрутке вниз .header скрывается, а при прокрутке вверх возвращается с уменьшенной высотой. Такой подход экономит вертикальное пространство и делает интерфейс более удобным на мобильных устройствах.

Работа с событиями

Headroom.js предоставляет набор событий для тонкой настройки поведения:

  • onPin — срабатывает при закреплении шапки.
  • onUnpin — срабатывает при скрытии.
  • onTop — когда страница прокручена до верха.
  • onNotTop — когда страница прокручена вниз.

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

headroom = new Headroom(header);
headroom.on("pin", function() {
  console.log("Шапка закреплена");
});
headroom.on("unpin", function() {
  console.log("Шапка скрыта");
});
headroom.init();

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

Адаптация для мобильных устройств

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

var headroomMobile = new Headroom(header, {
  tolerance: { up: 3, down: 3 },
  offset: 30,
  classes: {
    pinned: "mobile-visible",
    unpinned: "mobile-hidden"
  }
});
headroomMobile.init();

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

.header.mobile-visible {
  height: 50px;
}

.header.mobile-hidden {
  transform: translateY(-100%);
}

Такое сочетание обеспечивает компактную и удобную навигацию на всех экранах.

Продвинутые техники

  1. Совмещение с плавным скроллом: при использовании библиотеки для страниц с якорями рекомендуется применять scroll-behavior: smooth; в CSS, чтобы скрытие шапки не казалось резким.
  2. Интеграция с SPA: для приложений на Vue, React или Angular можно инициализировать Headroom в хуках жизненного цикла компонента.
  3. Комбинация с другими эффектами: прозрачность, тени и изменение фона можно добавлять через события onPin и onUnpin, создавая более выразительные интерфейсы.

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

Оглавление