8 790 Скрипты / Other

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, которые можно переопределять при инициализации:

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:
Все эти API имеют полифилы, таким образом headroom.js может работать и со старыми браузерами, если это необходимо.
Скачать 346Загрузок 40,14 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи