Шапка, яка прилипає і автоматично приховується

Шапка, яка приєднується і автоматично приховується, - постріл, який вбиває відразу двох зайців: робить навігацію по сайту більш простою і доступною в будь-якому місці сторінки та зберігає робочий простір.

Прилипання

<header class="header" role="banner">
    <!-- ... -->
</header>

.header
{
    width: 100%;
    height: 7.5em;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
}

Трохи очевидного коду, який змусить шапку не змінювати свого положення при прокручуванні сторінки, тобто змусить її прилипнути до верху. Тепер привчимо нашу шапку автоматично ховатись.

Автоматичне приховування

Автоматичне приховування полягає в тому, щоб заховати шапку, коли користувач її не потребує, і показати її знову, коли вона йому може знадобитися: при досягненні кінця сторінки або при початку прокрутки вгору. Приховування може проходити мінімум у двох режимах: ледачому і реактивному.

Reactive

Його суть в тому, що приховування починається миттєво, одразу коли почалася прокрутка сторінки. З точки зору користувача, використання цього режиму вносить свій маленький, але позитивний, внесок в досвід користування. Але у цього методу є і зворотна сторона медалі — він реалізується виключно за допомогою JavaScript, через його природу ми не можемо використати регулювання JS-подій, тобто викликати його тільки в певні конкретно позначені проміжки часу. В принципі це означає, що наш скрипт буде робити обчислення, при кожному торканні колеса миші, що в свою чергу має обернутися нераціональним використанням процесорного часу. На щастя, в більшості випадків це більш теоретична проблема, бо кількість розрахунків, яку треба виконати, досить незначна.

Алгоритм полягає в зміні характеристики top при прокручуванні сторінки: 

//...
window.addEventListener( 'scroll', function()
{
    //...
    if( wScrollCurrent <= 0 ) // прокручена до самого верху. шапка прилипає
        element.style.top = '0px';
    else if( wScrollDiff > 0 ) // прокручуємо вгору. елемент виїжджає
        element.style.top = ( elTop > 0 ? 0 : elTop ) + 'px';
    else if( wScrollDiff < 0 ) // прокручуємо вниз
    {
        if( wScrollCurrent + wHeight >= dHeight - elHeight )  // прокручена до самого низу. шапка виїжджає
            element.style.top = ( ( elTop = wScrollCurrent + wHeight - dHeight ) < 0 ? elTop : 0 ) + 'px';
        else // прокручуємо вниз. елемент ховається
            element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) + 'px';
    }
    //...
});
//...

Lazy

Цей метод не дає такого ж відчуття гнучкості, тому що в більшій мірі залежить від частоти регулювання JS-подій (event throttling). Він більш економічний, а також використовує CSS-анімацію для приховування та відображення, що надає нам повну свободу в налаштуванні цієї самої анімації. Для ледачого режиму алгоритм буде дещо відрізнятися: він не буде змінювати ніяких css-властивостей, але додаватиме нашій шапці додатковий клас — header--hidden. 

//...
window.addEventListener( 'scroll', throttle( throttleTimeout, function()
{
    //...
    if( wScrollCurrent <= 0 ) // прокручено до самої гори. Елемент прилипає
        removeElementClass( element, elClassHidden );
    else if( wScrollDiff > 0 && hasElementClass( element, elClassHidden ) ) // прокручуємо вгору. елемент з'являється
        removeElementClass( element, elClassHidden );
    else if( wScrollDiff < 0 ) // прокручуємо вниз
    {
        if( wScrollCurrent + wHeight >= dHeight && hasElementClass( element, elClassHidden ) ) // прокручено до самого низу. елемент з'являється
            removeElementClass( element, elClassHidden );
        else // прокручуємо вниз, елемент ховається
            addElementClass( element, elClassHidden );
    }
    //...
}));
//...

Додамо стилів цьому класу:

.header
{
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
    transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}
.header--hidden
{
    -webkit-transform: translateY( -100% );
    -ms-transform: translateY( -100% );
    transform: translateY( -100% );
}

Додаткові властивості хедеру

Іноді, особливо для головної сторінки, це може бути корисно - мати більшу шапку знаходячись на початку сторінки, щоб привернути увагу відвідувача. Нам потрібен додатковий клас CSS для управління висотою заголовка:

.header--narrow
{
    height: 5em;
}

У той час як JavaScript частина контролює використання нового CSS класу, JS додає ім'я класу, коли сторінка починає прокручуватисьі видаляє, коли користувач досягає верхньої частини сторінки.

// ...
window.addEventListener( 'scroll', throttle( throttleTimeout, function()
{
    // ...
    if( wScrollCurrent > elNarrowOffset ) // перемикач
    {
        if( !hasElementClass( element, elClassNarrow ) )
            addElementClass( element, elClassNarrow );
    }
    else removeElementClass( element, elClassNarrow );
    // ...
}));
// ...

Демо

На сторінці з демо ви знайдете приклади реалізації описаного в статті на чистому JS (IE9+) з використанням JQuery.