Buat Header.js yang tersendiri yang tersendiri dengan Headroom.js

Pengetua automatik menyembunyikan telah menjadi semakin popular dalam reka bentuk web untuk seketika. Banyak blog dan majalah dalam talian menggunakan header melekat kepada menyimpan pengguna yang terlibat dan memberi mereka akses langsung kepada navigasi.

Sederhana mempunyai mentafsirkan semula ciri ini dengan konsep asas itu menyembunyikan navigasi sementara menatal ke bawah tetapi menunjukkannya sementara menatal ke atas. Konsep ini telah menjadi trend yang sangat popular dan sekarang anda boleh dengan mudah meniru itu menggunakan Headroom.js.

Headroom.js adalah a perpustakaan JavaScript vanila percuma dengan tiada kebergantungan atau ciri API berlebihan. Anda hanya menambahnya ke HTML anda, sasaran tajuk halaman, dan biarkan ia berjalan.

Headroom sahaja menambah dan mengalih keluar kelas CSS tertentu yang bernyawa untuk tunjukkan / sembunyikan pengepala menggunakan JavaScript untuk mengesan gerakan.

Anda boleh membuat fungsi ini sendiri tetapi mengapa mengganggu? Headroom diuji dan menyokong semua pelayar utama. Ia juga bermain bagus dengan jQuery atau Zepto jika anda sudah mempunyai pustaka JS yang dipasang di laman web anda.

Anda akan dapati banyak contoh kod di repo GitHub tetapi di sini a contoh mudah yang mensasarkan #kepala elemen:

 var myElement = document.querySelector ("# header"); / / buat objek Headroom lulus dalam elemen #header var headroom = Headroom baru (myElement); // memulakan headroom.init perpustakaan (); 

The di dalamnya() fungsi mempunyai banyak pilihan untuk menyesuaikan. Anda boleh menyesuaikan yang berbeza kelas elemen, bersama dengan yang berbeza panggil pemanggil acara di mana anda boleh membenamkan fungsi anda sendiri. Sebagai contoh, jika anda mahu unsur itu pudar selepas ia disahkan anda akan menggunakannya onUnpin panggilan balik.

Pilihan ini adalah semua disenaraikan di halaman pemalam utama, jadi periksa dan lihat apa yang anda fikirkan. Sekiranya anda mahu melihatnya Headroom dalam tindakan lihat pada pen di bawah yang mengandungi a klon penuh halaman demo utama.