MenusLesson 34Preview gratis
Shrink Navbar on Scroll
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini mengulas pembuatan Bilah Navigasi yang Menyusut Saat Digulir (Shrink Navbar on Scroll). Saat berada di bagian paling atas halaman, navbar tampil luas dengan logo besar dan padding lapang. Ketika pengguna mulai menggulir ke bawah, padding dan ukuran logo menyusut anggun sehingga bilah menu menjadi lebih kompak.
Poin kunci
- Mendengarkan event scroll untuk mendeteksi ambang batas (contoh: scrollTop > 80px)
- Menyusutkan padding navbar dari 80px 10px menjadi 30px 10px
- Mengecilkan ukuran font atau logo dari 35px menjadi 25px secara serempak
- Menerapkan CSS transition: 0.4s pada padding dan font-size agar perubahan mulus
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.