Цей тренд почався з бічних панелей, але сьогодні його популярність доросла і до заголовних частин (header) веб-сайту. Чому? Тому що часто в заголовних частинах розташоване меню навігації.
Давайте поглянемо на те, розробкою чого ми сьогодні займаємося.
Якщо ви хочете стежити за кодом по ходу керівництва, то повний код можна завантажити тут.
HTML для нашого прикладу досить простий. Все, що нам потрібно, це h1 всередині header. Нижче нього у нас буде зображення, яке змушує відвідувачів прокручувати сторінку, що дозволить нам протестувати ефект.
CSS-переходи - це найкращий спосіб управління анімацією, яку потрібно застосувати до нашої липкою заголовної частини. Все, для чого ми використовуємо jQuery, це визначення розташування скролінгу на сторінці (scroll position).
Це означає, що у нас буде можливість стилізувати заголовну частину на основі того, чи був застосований клас 'sticky'.
Важливо вказати на те, що в даному прикладі нам досить добре допомагає jQuery, але при цьому є відмінний запасний варіант. Якщо підтримка j # 097; vascript буде відключена, навігація все одно буде працювати, так як header буде оформлений як звичайна заголовна частина будь-якого веб-сайту.
Наш CSS-код використовується для стилізації два різних положення: положення default, і положення 'sticky'. І між цими двома положеннями немає ніякого переходу.
Для початку давайте додамо кілька простих стилів, які покращують зовнішній вигляд нашої заголовної частини:
Тепер перейдемо до найцікавішого: коли користувач прокручує сторінку, до header застосовується клас 'sticky', і тепер у нас з'являється можливість оформити його інакше, перевизначивши пріоритет уваги на сторінці. Ми також ставимо фіксоване позиціонування, щоб його розташування не змінювалося.
Тут нам потрібно зробити кілька речей: перш за все, нам потрібно змінити розмір, що дозволило б зайняти менше місця на екрані. А також потрібно змінити колір і виставити вирівнювання по лівому краю, щоб візуально цей елемент не заважав користувачам:
В цілому, то, що ви вирішите зробити тут, залежить від дизайну, який вам потрібно отримати. А так можна робити все, що вам захочеться, звичайно ж.
Якщо ви зараз протестіруете те, що виходить, то побачите, що заголовна частина змінюється при прокручуванні сторінки.
Тепер, щоб анімувати це зміни, все що нам потрібно зробити, це виставити перехід для header:
Завдяки можливості використовувати CSS3-властивості і перемикати класи за допомогою jQuery, розробка анімованих заголовних частин стала неймовірно простим завданням.
Що ще слід зазначити, так це те, що код відмінно адаптується під різні ситуації.