MenusLesson 33Preview gratis
Hide Navbar on Scroll
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini mengulas pembuatan Bilah Navigasi Cerdas yang Bersembunyi Saat Digulir ke Bawah (Hide Navbar on Scroll). Pola cerdas ini memaksimalkan area pandang konten saat membaca: navbar otomatis tersembunyi ke atas saat pengguna scroll ke bawah, dan muncul kembali seketika saat pengguna scroll ke atas.
Poin kunci
- Membandingkan posisi gulir saat ini (currentScrollPos) dengan posisi sebelumnya (prevScrollpos)
- Jika prevScrollpos > currentScrollpos (scroll ke atas), setel style.top = "0"
- Jika prevScrollpos < currentScrollpos (scroll ke bawah), setel style.top = "-50px"
- Menerapkan CSS transition: top 0.3s agar animasi sembunyi dan muncul terasa natural
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.