Skip links и headroom

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

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

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

Для начала необходимо подключить скрипт библиотеки. Она может быть установлена через npm или подключена через CDN:

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

После подключения создается экземпляр Headroom:

var header = document.querySelector("header");
var headroom  = new Headroom(header, {
    tolerance: 5,
    offset: 50,
    classes: {
        initial: "headroom",
        pinned: "headroom--pinned",
        unpinned: "headroom--unpinned",
        top: "headroom--top",
        notTop: "headroom--not-top"
    }
});
headroom.init();

Параметры конфигурации:

  • tolerance — число пикселей, на которое пользователь должен прокрутить страницу, прежде чем шапка изменит состояние. Позволяет избежать лишних срабатываний при мелких прокрутках.
  • offset — вертикальное смещение от верхней границы страницы, после которого начинается отслеживание прокрутки.
  • classes — объект, содержащий классы CSS для различных состояний шапки: initial, pinned, unpinned, top, notTop.

Основные состояния и классы

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

  1. initial — присваивается элементу при инициализации Headroom.
  2. pinned — элемент видим (прокрутка вверх).
  3. unpinned — элемент скрыт (прокрутка вниз).
  4. top — страница в верхней точке (scrollY = 0).
  5. notTop — страница прокручена вниз.

Эти классы можно использовать в CSS для анимаций и переходов:

.headroom {
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}
.headroom--unpinned {
    transform: translateY(-100%);
}
.headroom--pinned {
    transform: translateY(0%);
}

Skip links — это ссылки, которые позволяют пользователю быстро перейти к основному контенту страницы, минуя навигацию. Они критически важны для доступности (accessibility) и обычно размещаются в начале документа.

При использовании Headroom.js важно учитывать, что шапка может скрываться, и skip links должны оставаться корректно доступными. Для этого рекомендуется:

  1. Размещать skip links перед элементом header в HTML.
  2. Обеспечивать фокусировку ссылки при активации с помощью CSS:
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 1000;
    transition: top 0.3s;
}
.skip-link:focus {
    top: 0;
}
  1. Проверять совместимость с headroom--unpinned, чтобы элемент не перекрывал skip links, когда шапка скрыта.

Расширенные возможности и события

Headroom.js предоставляет возможность подписываться на события:

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

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

headroom = new Headroom(header);
headroom.init();

header.addEventListener("headroom.pin", function() {
    console.log("Шапка показана");
});

header.addEventListener("headroom.unpin", function() {
    console.log("Шапка скрыта");
});

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

Интеграция с адаптивным дизайном

При адаптивном дизайне необходимо учитывать:

  • Минимальные размеры экрана и изменение поведения шапки на мобильных устройствах.
  • Возможность отключить скрытие шапки на маленьких экранах, если навигация критична для UX.

Пример условного отключения на мобильных устройствах:

if(window.innerWidth > 768) {
    headroom.init();
}

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

  • Использовать плавные CSS-переходы для улучшения визуального восприятия.
  • Сохранять skip links на переднем плане, чтобы они оставались доступными для клавиатурной навигации.
  • Настраивать tolerance и offset в зависимости от высоты шапки и длины контента страницы.
  • Тестировать поведение на разных устройствах и браузерах для обеспечения стабильного UX.

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

Оглавление