Верх страницы
Обложка к записи Паттерн Quick Return при помощи headroom.js
Время для прочтения: 0 мин. 20 сек.

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

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

2 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Адель
Адель
5 лет назад

«Подключите скрипт headroom.js на вашу страницу и потом:» Что значит и потом? что делать с этим кодом, который идет после «и потом»? Подскажите пожалуйста

Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы