Hide Menu on Scroll

Hide Menu on Scroll

Berbeda dengan tutorial yang sebelumnya, untuk artikel kali ini masih seputar navigasi menu kita akan mencoba membuat teknik hide menu on scroll, jadi teknik ini akan memberikan efek pada navigasi menu jika kita melakukan scroll halaman kebawah, maka navigasi menu tersebut akan hilang, namun sebaliknya jika kita melakukan scroll keatas maka navigasi menu akan terlihat kembali.

Tahapannya adalah buat file index.html, kemudian padukan dengan beberapa css dan javascript, langsung saja lihat potongan-potongan skrip berikut:

lalu lanjutkan dengan menambahkan skrip kode untuk css-nya, sebagai berikut:

tinggal untuk menjalankannya, disini kita tambahkan javascript, bisa dilihat disini:

Untuk hasil akhirnya, nanti kita akan dapati seperti pada tampilan dibawah ini: