Креирајте лепљиву заглавље са аутоматским скривањем са функцијом Хеадроом.јс

Аутоматско скривање заглавља су већ дуже време популарни у веб дизајну. Многи блогови и онлине часописи користе лепљиво заглавље држати кориснике укљученим и омогућити им директан приступ навигацији.

Медиум има редефинисали ову функцију са основним концептом скрива навигацију док сцроллинг довн али показује док сцроллинг уп. Овај концепт је постао дивљи популарни тренд и сада можете лако поновити Користећи Хеадроом.јс.

Хеадроом.јс ис а фрее ванилла ЈаваСцрипт библиотека без зависности или претераних АПИ карактеристика. Само га додајете у свој ХТМЛ, циљајте заглавље странице и пустите га да се покрене.

Једноставно додаје и уклања одређене ЦСС класе које анимирају да би прикажи / сакриј заглавље користите ЈаваСцрипт да бисте открили кретање.

Можете то учинити сами, али зашто се мучити? Простор је тестиран и подржава све главне прегледнике. Ит евен лепо свира са јКуери или Зепто ако већ имате ЈС библиотеку инсталирану на вашем сајту.

Наћи ћеш много узорака кода у ГитХуб репо али ево а једноставан пример који циља #хеадер елемент:

 вар миЕлемент = доцумент.куериСелецтор ("# хеадер"); // креира објекат Хеадроом који пролази у елементу #хеадер вар хеадроом = нев Хеадроом (миЕлемент); // иницијализира библиотеку хеадроом.инит (); 

Тхе у томе() функција има много опција за прилагођавање. Можете прилагодити различите елементе класе, заједно са различитим цалл цаллбацк где можеш уградите своје функције. На пример, ако желите да елемент избледи након што сте га уклонили, употребили бисте онУнпин позове.

Ове опције су све наведен на главној страници додатка, зато проверите и видите шта мислите. Ако желите да видите Висина у акцији погледајте оловку испод која садржи а пуни клон главне демо странице.