Headroom — липкий header

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 может работать и со старыми браузерами, если это необходимо.