Shrink Navigation Menu on Scroll

Shrink Navigation Menu on Scroll

Pernahkan teman-teman menjumpai sebuah halaman web, ketika kita melakukan scroll, maka menu atau navigasinya akan mengecil. Teknik ini menggunakan JavaScript atau jika ingin lebih mudah bisa dilakukan dengan menggunakan jQuery.

Artikel kali ini kita akan mencoba membuat efek tersebut, sebutannya mungkin yang paling umum adalah ‘Shrink Navigation Menu on Scroll’.

Teman-teman siapkan dahulu file-filenya seperti index.html, css dan javascriptnya.

Berikut potongan kodenya:

letakkan pada tag body, kemudian tambahkan dengan css, seperti berikut:

jangan lupa teman-teman harus mengaktifkan JavaScriptnya, dengan menambahkan kode seperti berikut:

Untuk hasilnya kalian bisa lihat disini: