Паттерн Quick Return при помощи headroom.js

Борясь с нехваткой вертикального пространства, дизайнеры интерфейсов Google Android придумали новый паттерн Quick Return (быстрый возврат).

Принцип работы данного паттерна предельно прост: при скроллинге вниз верхняя панель приложения скрывается, при скроллинге вверх - вновь показывается.

Что такое headroom.js

headroom.js — легковесный виджет, написанный на чистом JavaScript, реагирующий на скроллинг контента. Он просто переключет CSS-классы.

Как работает headroom.js

Скрипт просто добавляет и удаляет CSS-классы в ответ на событие прокрутки.


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

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

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

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

Как использовать hradroom.js

Использовать headroom.js очень просто. Он имеет API на чистом JavaScript и плагины для jQuery/Zepto/AngularJS.

На обычном JavaScript

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

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

На jQuery/Zepto

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


$(function() {
    $("#header").headroom();
});

Плагин также можно инициализировать при помощи data атрибутов:


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

Для правильной работы с Zepto необходимо подключить модуль data.

На AngularJS

Подключите скрипты headroom.js и angular.headroom.js на вашу страницу и потом:


<header headroom></header>
<!-- или -->
<headroom></headroom>
<!-- или с настройкми -->
<headroom tolerance='0' offset='0' classes="{pinned:'headroom--pinned',unpinned:'headroom--unpinned',initial:'headroom'}"></headroom>

Настройки hradroom.js

Headroom.js также можно настроить, передав в его конструктор объект опций. Настройки по умолчанию хранятся в Headroom.options. Структура объекта настроек:


{    
    offset : 0, 
    tolerance : 0,
    tolerance : {
        up : 5,
        down : 0
    },	
    classes : {        
        initial : "headroom",        
        pinned : "headroom--pinned",        
        unpinned : "headroom--unpinned",        
        top : "headroom--top",        
        notTop : "headroom--not-top"
    },    
    onPin : function() {},    
    onUnpin : function() {},
    onTop : function() {},
    onNotTop : function() {}
}

CSS

В самом простом варианте CSS может выглядеть так:


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

Здесь мы просто показываем или скрываем блок с классом .headroom. Либо можно пойти дальше и задействовать анимацию из CSS3:


.headroom {
    -webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;	
	transition: all .25s ease-in-out;
}
.headroom--pinned {
    -moz-transform: translateY(0%);
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}
.headroom--unpinned {
    -moz-transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

Потрясающих эффектов можно добиться, подключив Animate.css — набор кроссбраузерных CSS3 анимаций.

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

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

Все эти API можно эмулировать при помощи полифилов для успешной работы в старых версиях браузеров.

Примеры

Скачать hradroom.js

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>