Menu Navigasi Situs Bootstrap Menciut Ketika Scroll Kebawah

Jika kalian membuka situs ini di komputer, dapat diperhatikan menu navigasi atas situs ini akan menciut ketika di scroll kebawah. Pada artikel ini akan saya berikan cara membuat hal serupa yaitu membuat menu navigasi atas situs menciut ketika di scroll kebawah.

Tapi, tutorial ini hanya untuk situs yang dibangun dengan Bootstrap karena kita akan memanfaatkan class yang ada pada bootstrap.

Secara default, nav pada Bootstrap memiliki class. Silahkan gunakan class yang membuat nav Bootstrap diam diatas situs (selalu muncul, tidak hilang keatas) maka contohnya menjadi seperti ini navbar-default navbar-fixed-topdan silahkan tambahkan id pada nav tersebut yang mana id ini akan kita panggil di javascript nanti.

ads by posciety

Contoh nav kalian sekarang seperti ini: <nav id="menu-utama" class="navbar navbar-default navbar-fixed-top"> </nav>

Sekarang tambahkan sedikit javascript yang membuat nav tersebut menciut

<script type="text/javascript">
		$('#menu-utama').affix({
  offset: {
    top: 100
  }
})
	</script>

Tambahkan script ini tepat sebelum penutup body.

offset: {top: 100} adalah nilai dimana nav tersebut akan mulai menciut (pixel). Silahkan atur nilai 100 ini dengan nilai yang diinginkan, semakin kecil maka semakin cepat menciut (sedikit scroll kebawah akan langsung menciut).

Catatan: Untuk menggunakan fitur ini pastikan kalian tidak menghilangkan script bawaan Bootstrap (bootstrap-jquery dan bootstrap.min).

Masih bingung ? Lihat : Video tutorial cara menggunakan affix class javascript Bootstrap.

Selamat mencoba !