MoreLesson 217Preview gratis
Shrink Header on Scroll
Lesson ini bagian dari How To · Semua level
Ringkasan
Shrink header on scroll adalah teknik mengecilkan header saat pengguna menggulir ke bawah, sehingga ruang konten bertambah. JavaScript menambahkan kelas pada header ketika melewati ambang scroll, lalu CSS mengubah padding, tinggi, atau ukuran font dengan transisi. Efeknya harus halus dan tidak membuat navigasi sulit digunakan.
Poin kunci
- Deteksi posisi scroll lalu tambahkan kelas seperti .shrink pada header
- Animasikan padding, font-size, atau tinggi dengan transition
- Jangan mengecilkan elemen interaktif hingga sulit diklik atau disentuh
- Batasi perubahan pada properti yang tidak memicu layout berlebihan
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.