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

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

Прилипання

    <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.