MenusLesson 35Preview gratis
Sticky Navbar
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini mengulas pembuatan Bilah Navigasi Lengket (Sticky Navbar) menggunakan JavaScript dan CSS. Navbar awalnya berada di bawah banner hero header, lalu saat pengguna menggulir halaman hingga navbar menyentuh batas atas layar, JavaScript menyematkan kelas .sticky sehingga bilah menu terkunci tetap menempel di atas.
Poin kunci
- Menghitung offsetTop navbar saat halaman dimuat (navbar.offsetTop)
- Mendengarkan event scroll untuk membandingkan window.pageYOffset dengan offsetTop awal
- Menambahkan kelas .sticky (position: fixed; top: 0; width: 100%) saat scroll melampaui posisi awal
- Dapat diimplementasikan secara murni dengan CSS modern menggunakan position: sticky; top: 0;
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.