Headroom.js - бібліотека, що реалізує патерн Quick Return для економії вертикального простору екрану

    Одна з типових проблем, що виникають перед розробником інтерфейсу для пристроїв з альбомної орієнтацією екрана (особливо якщо у них маленька діагональ) — недолік вертикального простору. Досить популярний елемент — горизонтальна панель з кнопками або меню, зафіксована над основним контентом, дає швидкий доступ до потрібних функцій, але займає дефіцитне місце. Якщо не фіксувати її, а дозволити прокручувати разом зі сторінкою, то при необхідності скористатися однією з кнопок, користувачеві доведеться повертатися на самий верх. Один із шаблонів дизайну інтерфейсів для вирішення цієї проблеми отримав назву Quick Return (швидке повернення) — при початку прокрутки вниз панель іде за межі екрану, але висувається знову, як тільки починається прокрутка вгору, незалежно від того, в якій частині сторінки знаходиться користувач.
 
Принцип роботи бібліотеки Headroom.js , що реалізує цей шаблон, дуже простий — у відповідь на початок скролінгу змінюються CSS-класи панелі, роблячи її видимої або невидимою. У бібліотеки є API як для чистого JavaScript, так і для jQuery / Zepto і AngularJS.
 
 

Використання

Чистий JS:
 
 
// находим элемент
var myElement = document.querySelector("header");
// создаём экземпляр Headroom, передавая в конструктор найденный элемент
var headroom  = new Headroom(myElement);
// инициализируем экземпляр
headroom.init();

jQuery / Zepto:
 
 
// Проще некуда!
// init() вызывается неявно
$("header").headroom();

При використанні модуля data можливий і чисто декларативний стиль:
 
 
<!-- выбирается элемент $("[data-headroom]") -->
<header data-headroom>

AngularJS:
 
 
<header headroom></header>
<!-- или -->
<headroom></headroom>
<!-- или с опциями -->
<headroom tolerance='0' offset='0' classes="{pinned:'headroom--pinned',unpinned:'headroom--unpinned',initial:'headroom'}"></headroom>

 
Опції
Для управління поведінкою Headroom.js передбачені опції. Їх небагато, а структура об'єкта опцій виглядає так:
 
 
{
    // вертикальное смещение в пикселях, при котором панель "отцепляется"
    offset : 0,
    // допуск в пикселях, в пределах которого состояние не меняется
    tolerance : 0,
    // допуск также можно задать отдельно для прокрутки вверх или вниз
    tolerance : {
        down : 0,
        up : 0
    },
    // Применяемые классы CSS
    classes : {
        // при инициализации элемента
        initial : "headroom",
        // при прокрутке вверх
        pinned : "headroom--pinned",
        // при прокрутке вниз
        unpinned : "headroom--unpinned",
        // выше вертикального смещения
        top : "headroom--top",
        // ниже вертикального смещения
        notTop : "headroom--not-top"
    },
    // callback при фиксации элемента, здесь и далее this указывает на элемент
    onPin : function() {},
    // callback при отцеплении
    onUnpin : function() {},
    // callback при попадании выше вертикального смещения
    onTop : function() {},
    // callback при попадании ниже вертикального смещения
    onNotTop : function() {}
}

 
Приклад використання стилів
 
.headroom {
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}

.headroom--unpinned {
    transform: translateY(-100%);
}

Ось і все. Пограти з параметрами і стилями можна на демонстраційної сторінці . Бібліотека поширюється під ліцензією MIT. Автор Headroom.js — веб-розробник Нік Вільямс, йому також належить ще один досить популярний проект — бібліотека enquire.js для роботи з media queries.
 
 
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.