Halo semuanya, semoga sehat selalu. Kali ini saya ingin membahas tentang seputar pemrograman website dan serta memberikan tutorial/tips dan trik tentang Cara Membuat Sticky Header dengan Jquery.

Dijaman yang modern ini pasti teman-teman sudah sangat mengenal tentang website dan diantara website-website tsb pasti teman-teman pernah melihat pada bagian headernya tetap menempel diposisi saat kita scroll kebawah. Nah itulah yang disebut dengan sticky header (header menempel tetap diatas).

  • Cara Membuat Sticky Header dengan Jquery

Bagaimana cara membuatnya ? mari kita mulai mempraktekannya. Pertama-tama buat terlebih dahulu sebuah folder. Lalu kemudian jalankan/run text-editor yang teman-teman gunakan. Jika sudah silahkan teman-teman copy/ketiklah script HTML seperti dibawah ini :

Jika sudah, lanjut ke sentuhan selanjutnya teman-teman ketik/copy kembali script CSS seperti dibawah ini :

Jika sudah HTML dan CSS nya, langkah selanjutnya kita kasih sentuhan Jquery seperti dibawah ini :

Dan hasil dari ketiga script diatas akan menjadi seperti dibawah ini :

Jika sudah seperti diatas, silahkan teman-teman simpan. Lalu coba jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan sama seperti dibawah ini

demonya silahkan klik disini > DEMO STICKY HEADER

Bagaimana teman-teman ? cukup mudah bukan. Jadi seperti itulah contoh sederhana tentang Cara Membuat Sticky Header Dengan Jquery.

Untuk pengembangan kedepannya silahkan teman-teman coba modifikasi sendiri dengan acuan dasar seperti diatas.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Sticky Header Dengan Jquery. Semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih.