Headroom.js ile Otomatik Gizleme Yapışkan Başlık Oluşturma

Otomatik gizleme başlıkları uzun süredir web tasarımında sürekli popüler olmuştur. Birçok blog ve çevrimiçi dergi yapışkan başlığı kullanır kullanıcıları meşgul et ve navigasyona doğrudan erişmelerini sağlayın.

Orta bu özelliği yeniden tanımladı temel bir kavramla ki navigasyonu gizler süre aşağı kaydırma fakat gösterir süre yukarı kaydırma. Bu kavram bir hale geldi çılgınca popüler trend ve şimdi kolayca yapabilirsiniz kopyala kullanma Headroom.js.

Headroom.js bir ücretsiz vanilya JavaScript kütüphanesi bağımlılık veya aşırı API özellikleri olmadan. Siz sadece HTML'nize ekleyin, sayfa başlığını hedefleyin ve çalışmasına izin verin.

Sadece kafa boşluğu canlandıran belirli CSS sınıflarını ekler ve kaldırır amacıyla başlığı göster / gizle hareketi algılamak için JavaScript kullanma.

Bu işlevselliği kendiniz yapabilirsiniz ama neden rahatsız ediyorsunuz? Tavan boşluğu test edildi ve tüm büyük tarayıcıları destekler. O bile jQuery veya Zepto ile iyi oynuyor Sitenize kurulu bir JS kütüphaneniz varsa.

Bulacaksın bol miktarda kod örneği GitHub deposunda ama işte bir basit örnek hedefleyen #header öğe:

 var myElement = document.querySelector ("# header"); // #header öğesinden geçen bir Headroom nesnesi yaratın var headroom = new Headroom (myElement); // kütüphaneyi başlat headroom.init (); 

içinde() işlevi var özelleştirmek için birçok seçenek. Farklı özelleştirebilirsiniz eleman sınıfları, farklı ile birlikte olay tetikleyici geri çağrıları nerede yapabilirsin kendi fonksiyonlarını yerleştir. Örneğin, öğenin sabitlendikten sonra solmasını istiyorsanız, onUnpin geri aramak.

Bu seçeneklerin hepsi ana eklenti sayfasında listelenmiştir, öyleyse kontrol edin ve ne düşündüğünüzü görün. Eğer görmek istiyorsan Headroom harekete geçti aşağıda bulunan kaleme bir göz atın. ana demo sayfasının tam klonu.