ImagesLesson 80Preview gratis
Change Bg on Scroll
Lesson ini bagian dari How To · Semua level
Ringkasan
Change background on scroll membuat header atau elemen berubah warna saat halaman digulir melewati batas tertentu. JavaScript membaca posisi scroll, lalu menambah atau menghapus kelas CSS. Transisi pada warna latar membuat perubahan terasa halus dan tidak mengagetkan.
Poin kunci
- window.scrollY menunjukkan jarak scroll vertikal dalam piksel.
- EventListener scroll dijalankan setiap kali posisi gulir berubah.
- classList.toggle dengan kondisi menentukan kelas berdasarkan ambang batas.
- Opsi { passive: true } membantu performa listener scroll.
- Panggil fungsi sekali saat halaman dimuat agar status awal benar.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.