Buat Header Sticky Menyembunyikan Otomatis dengan Headroom.js

Header sembunyi otomatis telah populer dalam desain web selama beberapa waktu. Banyak blog dan majalah online menggunakan tajuk lengket pertahankan pengguna tetap terlibat dan beri mereka akses langsung ke navigasi.

Medium memiliki mendefinisikan kembali fitur ini dengan konsep dasar itu menyembunyikan navigasi sementara gulir ke bawah tapi menunjukkan itu sementara gulir ke atas. Konsep ini telah menjadi tren yang sangat populer dan sekarang kamu bisa dengan mudah meniru itu menggunakan Headroom.js.

Headroom.js adalah a perpustakaan JavaScript vanilla gratis tanpa dependensi atau fitur API yang berlebihan. Anda cukup menambahkannya ke HTML Anda, targetkan tajuk halaman, dan biarkan berjalan.

Ruang kepala sederhana menambah dan menghapus kelas CSS tertentu yang bernyawa untuk tampilkan / sembunyikan tajuk menggunakan JavaScript untuk mendeteksi gerakan.

Anda dapat membuat fungsi ini sendiri tetapi mengapa repot-repot? Ruang kepala diuji dan mendukung semua browser utama. Bahkan bermain bagus dengan jQuery atau Zepto jika Anda sudah memiliki pustaka JS yang diinstal di situs Anda.

Anda akan menemukannya banyak contoh kode di repo GitHub tapi di sini a contoh sederhana yang menargetkan #header elemen:

 var myElement = document.querySelector ("# header"); // buat objek Headroom lewat di elemen #header var headroom = new Headroom (myElement); // inisialisasi headroom perpustakaan.init (); 

Itu init () fungsi memiliki banyak pilihan untuk disesuaikan. Anda dapat menyesuaikan yang berbeda kelas elemen, dan berbeda peristiwa memicu callback dimana kamu bisa sematkan fungsi Anda sendiri. Misalnya, jika Anda ingin elemen tersebut memudar setelah dilepas, Anda akan menggunakan diUnpin panggilan balik.

Semua opsi ini terdaftar di halaman plugin utama, jadi periksa dan lihat apa yang Anda pikirkan. Jika kamu ingin melihat Ruang kepala beraksi lihat pena di bawah ini yang berisi a klon penuh dari halaman demo utama.