Sticky Navigation (JavaScript)

Sticky Navigation (JavaScript)

Halo teman-teman apa kabarnya 🙂
Bagi teman-teman yang masih kesulitan membuat Sticky Navigation, tutorial kali ini semoga saja membantu. Sticky Navigation yang akan kita buat disini murni menggunakan JavaScript dan tidak menggunakan plugin jQuery.

Jika teman-teman menjumpai sebuah web dan pada bagian atas terdapat sebuah menu navigasi kemudian kita melakukan gulir kebawah (scroll), menu tersebut akan selalu dan tetap berada pada posisi bagian atas, sementara bagian isi terus bergerak ke bawah, karena web tersebut menggunakan teknik sticky pada menu atau navigasinya.

Jadi caranya bagaimana agar bagian menu atau navigasi tetap berada pada posisi paling atas, sementara bagian isi ikut bergulir? yuk kita coba 🙂

Buat beberapa elemen div HTML, seperti berikut:

kemudian lanjutkan dengan melakukan styling pada CSS, dengan memberikan kode CSS seperti berikut ini:

Jangan lupa untuk menuliskan kode JavaScriptnya, yang berguna sebagai pemicu atau trigger Sticky Navigasinya, kodenya sebagai berikut:

Untuk hasilnya, bisa teman-teman lihat disini: