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

Что такое 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 браузера:

• requestAnimationFrame
• classList
• Function.prototype.bind

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

Примеры

• Песочница на сайте автора
• Все о дизайне, декоре, архитектуре и интерьерах

Скачать hradroom.js

• Несжатая версия
• Минимизированная версия