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.

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 !


Jangan Lupa Share !!!

61
9 shares, 61 points

Apa Reaksimu ?

Bingung Bingung
7
Bingung
Kesal Kesal
5
Kesal
OMG OMG
7
OMG
Takut Takut
6
Takut
Keren Keren
4
Keren
Sedih Sedih
9
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki