MoreLesson 216Preview gratis
Sticky Header
Lesson ini bagian dari How To · Semua level
Ringkasan
Sticky header adalah header yang tetap terlihat di atas layar setelah pengguna menggulir melewati batas tertentu. JavaScript dapat memantau posisi scroll lalu menambahkan kelas sticky yang mengubah posisi atau bayangan header. Pola ini sering dipakai pada situs dengan navigasi utama yang perlu selalu tersedia.
Poin kunci
- Bandingkan window.scrollY dengan ambang untuk menentukan status sticky
- classList.toggle('sticky', kondisi) menambah atau menghapus kelas secara otomatis
- position: sticky atau fixed dipakai untuk menahan header di atas
- Tambahkan z-index dan bayangan agar header terpisah dari konten
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.