Создайте автоматически скрывающийся липкий заголовок с Headroom.js

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

Средний имеет переопределил эту функцию с основной концепцией, которая скрывает навигацию в то время как прокрутка вниз но показывает это в то время как прокрутка вверх. Эта концепция стала дико популярная тенденция и теперь вы можете легко повторить это с помощью Headroom.js.

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

Высота просто добавляет и удаляет определенные классы CSS, которые анимируют чтобы показать / скрыть заголовок используя JavaScript для обнаружения движения.

Вы могли бы сделать эту функцию самостоятельно, но зачем? Headroom проверен и поддерживает все основные браузеры. Это даже хорошо играет с JQuery или Zepto если на вашем сайте уже установлена ​​библиотека JS.

Ты найдешь множество примеров кода в репозитории GitHub, но вот простой пример который нацелен на #header элемент:

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

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

Эти варианты все перечислены на главной странице плагина, так что проверь и посмотри, что ты думаешь. Если вы хотите увидеть Headroom в действии взгляните на ручку ниже, которая содержит полный клон главной демонстрационной страницы.