Headroom.js — библиотека, реализующая паттерн Quick Return для экономии вертикального пространства экрана

Одна из типичных проблем, возникающих перед разработчиком интерфейса для устройств с альбомной ориентацией экрана (особенно если у них маленькая диагональ) — недостаток вертикального пространства. Довольно популярный элемент — горизонтальная панель с кнопками или меню, зафиксированная над основным контентом, даёт быстрый доступ к нужным функциям, но занимает дефицитное место. Если не фиксировать её, а позволить прокручивать вместе со страницей, то при необходимости воспользоваться одной из кнопок, пользователю придётся возвращаться на самый верх. Один из шаблонов дизайна интерфейсов для решения этой проблемы получил название Quick Return (быстрый возврат) — при начале прокрутки вниз панель уходит за пределы экрана, но выдвигается вновь, как только начинается прокрутка вверх, независимо от того, в какой части страницы находится пользователь.

Принцип работы библиотеки Headroom.js, реализующей этот шаблон, очень прост — в ответ на начало скроллинга меняются CSS-классы панели, делая её видимой или невидимой. У библиотеки есть API как для чистого JavaScript, так и для jQuery/Zepto и AngularJS.

Использование

Чистый JS:

// находим элемент
var myElement = document.querySelector("header");
// создаём экземпляр Headroom, передавая в конструктор найденный элемент
var headroom  = new Headroom(myElement);
// инициализируем экземпляр
headroom.init();

jQuery/Zepto:

// Проще некуда!
// init() вызывается неявно
$("header").headroom();

При использовании модуля data возможен и чисто декларативный стиль:

<!-- выбирается элемент $("[data-headroom]") -->
<header data-headroom>

AngularJS:

<header headroom></header>
<!-- или -->
<headroom></headroom>
<!-- или с опциями -->
<headroom tolerance='0' offset='0' classes="{pinned:'headroom--pinned',unpinned:'headroom--unpinned',initial:'headroom'}"></headroom>

Опции

Для управления поведением Headroom.js предусмотрены опции. Их немного, а структура объекта опций выглядит так:

{
    // вертикальное смещение в пикселях, при котором панель "отцепляется"
    offset : 0,
    // допуск в пикселях, в пределах которого состояние не меняется
    tolerance : 0,
    // допуск также можно задать отдельно для прокрутки вверх или вниз
    tolerance : {
        down : 0,
        up : 0
    },
    // Применяемые классы CSS
    classes : {
        // при инициализации элемента
        initial : "headroom",
        // при прокрутке вверх
        pinned : "headroom--pinned",
        // при прокрутке вниз
        unpinned : "headroom--unpinned",
        // выше вертикального смещения
        top : "headroom--top",
        // ниже вертикального смещения
        notTop : "headroom--not-top"
    },
    // callback при фиксации элемента, здесь и далее this указывает на элемент
    onPin : function() {},
    // callback при отцеплении
    onUnpin : function() {},
    // callback при попадании выше вертикального смещения
    onTop : function() {},
    // callback при попадании ниже вертикального смещения
    onNotTop : function() {}
}

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

.headroom {
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}

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

Вот и всё. Поиграть с параметрами и стилями можно на демонстрационной странице. Библиотека распространяется под лицензией MIT. Автор Headroom.js — веб -разработчик Ник Вильямс, ему также принадлежит ещё один весьма популярный проект — библиотека enquire.js для работы с media queries.

Автор: ilya42

Источник