Скачать

Замечание: указанные размеры после сжатия gzip.

Что это вообще такое?

Headroom.js это легкий высокопроизводительный JS виджет (без зависимостей), который позволяет реагировать на прокрутку страницы пользователем. Живой пример это шапка на этой странице. Шапка скрывается при прокрутке вниз и появляется снова при прокрутке страницы вверх.

Зачем мне это использовать?

Фиксированные хедеры довольно популярный подход способствующий быстрому доступу пользователей к меню сайта, контактной информации фирмы и т.п. Это позволит ускорить навигацию пользователя по сайту. Но у этого подхода есть ряд проблем.

Большие экраны обычно имеют альбомную ориентацию, то есть имеют меньше пространства по высоте, чем по ширине. А фиксированные шапки могут содержать довольно много контента и занимать значительную область видимости. На маленьких экранах как правило преобладает вертикальная ориентация, где за счет размеров самого экрана и не правильной деградации контента в шапке также происходит то, что на половину экрана мы видим шапку, а контент занимает другую половину.

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

Как это работает?

headroom.js по сути просто добавляет и удаляет CSS классы у элемента в ответ на событие скролла:

<!-- инициализация -->
<header class="headroom">

<!-- прокрутка вниз -->
<header class="headroom headroom--unpinned">

<!-- прокрутка вверх -->
<header class="headroom headroom--pinned">

Опираясь на CSS классы headroom.js вы получаете невероятную гибкость. Выбор того, что делать при прокрутке вниз или вверх теперь полностью принадлежит вам - нужно лишь прописать необходимые CSS свойства в файле стилей.

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

Всё очень просто. Это чистое JS API, плюс опционально плагин для jQuery/Zepto и директива AngularJS.

На чистом JS

Подключите скрипт headroom.js на страницу, а затем:

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

С плагинами jQuery/Zepto

Подключите скрипт headroom.js и jQuery.headroom.js на страницу, а затем:

// очень просто
$("#header").headroom();

Плагин также предоставляет возможность использовать data-* API, если вы предпочитаете декларативный подход.

<!-- selects $("[data-headroom]") -->
<header data-headroom>

Замечание: дополнительно для Zepto потребуется data модуль для совместимости.

С AngularJS

Подключить скрипты headroom.js и angular.headroom.js. Затем:

<header headroom></header>
<!-- or -->
<headroom></headroom>
<!-- or with options -->
<headroom tolerance="0" offset="0" scroller=".my-scroller" classes="{pinned:'headroom--pinned',unpinned:'headroom--unpinned',initial:'headroom'}"></headroom>

Опции

Ниже представлены дефолтные значения объекта с параметрами для Headroom.js, которые можно переопределять при инициализации:

{
    // vertical offset in px before element is first unpinned
    offset : 0,
    // scroll tolerance in px before state changes
    tolerance : 0,
    // or you can specify tolerance individually for up/down scroll
    tolerance : {
        up : 5,
        down : 0
    },
    // css classes to apply
    classes : {
        // when element is initialised
        initial : "headroom",
        // when scrolling up
        pinned : "headroom--pinned",
        // when scrolling down
        unpinned : "headroom--unpinned",
        // when above offset
        top : "headroom--top",
        // when below offset
        notTop : "headroom--not-top",
        // when at bottom of scoll area
        bottom : "headroom--bottom",
        // when not at bottom of scroll area
        notBottom : "headroom--not-bottom"
    },
    // element to listen to scroll events on, defaults to `window`
    scroller : someElement,
    // callback when pinned, `this` is headroom object
    onPin : function() {},
    // callback when unpinned, `this` is headroom object
    onUnpin : function() {},
    // callback when above offset, `this` is headroom object
    onTop : function() {},
    // callback when below offset, `this` is headroom object
    onNotTop : function() {},
    // callback when at bottom of page, `this` is headroom object
    onBottom : function() {},
    // callback when moving away from bottom of page, `this` is headroom object
    onNotBottom : function() {}
}

CSS

Напомним, что headroom.js работает добавляя и удаляя классы реагируя на скролл. Это означает, что вам понадобится CSS. Например, вам нужно скрывать шапку при прокрутке вниз и показывать при прокрутке вверх. Вот базовый CSS для этого:

.headroom--pinned {
    display: block;
}
.headroom--unpinned {
    display: none;
}

Хотя это и функционально, но слишком резко. Для плавности добавим CSS transition:

/**
 * Note: I have omitted any vendor-prefixes for clarity.
 * Adding them is left as an exercise for the reader.
 */
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}

Обратите внимание что для переходов мы используем свойство transform. Причина в лучшей производительности при анимации в сравнении с top и bottom и то что вам не нужно знать заранее высоту элемента, значение -100% всегда будет полностью перемещать элемент за поле зрения.

Примеры

Можно попробовать по играться с параметрами на странице headroom.js и сразу увидеть изменения.

Поддержка браузерами

Headroom.js зависит от следующих API:

• requestAnimationFrame
• classList
• Function.prototype.bind

Все эти API имеют полифилы, таким образом headroom.js может работать и со старыми браузерами, если это необходимо.

Лицензия

MIT License.