Паттерн 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

Источник: https://www.kobzarev.com/programming/pattern-quick-return-pri-pomoshhi-headroom-js/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: