Създайте автоматично скриващо се заглавие с Headroom.js

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

Средно има предефинира тази функция с основно понятие скрива навигацията докато превъртане надолу но показва го докато превъртане нагоре. Тази концепция се превърна в диво популярна тенденция и сега можете лесно повторете това използвайки Headroom.js.

Headroom.js е a безплатна библиотека с ванилия 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 (); 

Най- в него() функция много опции за персонализиране. Можете да персонализирате различните класове елементи, заедно с различни извиквания за задействане на събития където можете вградете собствените си функции. Например, ако искате елементът да избледнее, след като бъде откачен, ще използвате onUnpin обаждане.

Всички тези опции са изброени на главната страница на приставката, така че проверете и вижте какво мислите. Ако искате да видите Глава в действие погледнете писалката по-долу, която съдържа a пълен клонинг на главната демо страница.