MenusLesson 32Preview gratis
Slide Down Bar on Scroll
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini mengulas pembuatan Bilah Navigasi yang Meluncur Turun Saat Digulir (Slide Down Bar on Scroll). Komponen ini tersembunyi secara default saat pengguna berada di bagian paling atas halaman, dan secara mulus meluncur turun dari atas layar ketika pengguna menggulir ke bawah melewati ambang batas tertentu.
Poin kunci
- Mendengarkan event scroll pada window (window.onscroll)
- Memeriksa posisi gulir peramban menggunakan document.documentElement.scrollTop
- Menyetel style.top = "0" jika scroll > 20px, atau style.top = "-50px" jika scroll kembali ke atas
- Menerapkan CSS transition: top 0.3s untuk animasi pergeseran vertikal yang halus
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.