Створіть автоматичне приховування липкого заголовка з Headroom.js

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

Середній має перевизначено цю функцію з базовою концепцією ховає навігацію час прокручування вниз але показує його час прокручування вгору. Ця концепція стала дико популярна тенденція і тепер можна легко повторити його використання Headroom.js.

Headroom.js - це безкоштовна бібліотека JavaScript для ванілі без залежностей або надмірних функцій API. Ви просто додаєте його у свій HTML, націлюєте на заголовок сторінки і нехай він запускається.

Висота просто додає та видаляє певні класи CSS, які анімують щоб показати / сховати заголовок використання JavaScript для виявлення руху.

Ви могли б зробити цю функціональність самостійно, але чому? Випробування і підтримує всі основні браузери. Це навіть відмінно грає з jQuery або Zepto якщо на вашому сайті вже встановлена ​​бібліотека JS.

Ви знайдете багато зразків коду в репо GitHub, але ось a простий приклад яка спрямована на #header елемент:

 var myElement = document.querySelector ("# header"); // створюємо об'єкт Headroom, що передається в елементі #header var headroom = new Headroom (myElement); // ініціалізувати бібліотеку headroom.init (); 

The в цьому() функція має багато варіантів для налаштування. Ви можете налаштувати різні класів елементів, поряд з різними зворотного виклику тригера події де можна вбудовуйте власні функції. Наприклад, якщо ви хочете, щоб елемент зникав після того, як його було припинено, ви використовували onUnpin зворотного виклику.

Всі ці опції перераховані на головній сторінці плагіна, тому перевірте і подивіться, що ви думаєте. Якщо ви хочете побачити Запас в дії подивіться на перо нижче, що містить a повний клон головної демонстраційної сторінки.