Membuat Scrollspy Dengan Bootstrap

Membuat Scrollspy Dengan Bootstrap Oleh: Hasyemi Rafsanjani Asyari

Hai JagoCodingers. Apa kabar? Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat active ketika kita berada di section tertentu ketika kita scroll? Ini bisa disebut sebagai Scrollspy. Scrollspy biasanya cocok untuk web yang bersifat single page, agar u...

Hai JagoCodingers. Apa kabar? Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat active ketika kita berada di section tertentu ketika kita scroll? Ini bisa disebut sebagai Scrollspy. Scrollspy biasanya cocok untuk web yang bersifat single page, agar user tau dimana posisi atau section yang sedang dibaca oleh mereka. Nah Bootstrap ternyata punya tools atau plugin seperti ini. Menggunakan CSS dan Javascript dari Bootstrap, hari ini kita akan mencoba membuat scrollspy. Yeahhhh! Tutorial ini akan memperlihatkan simple way to do Scrollspy, agar kalian tau dengan mudah bagaimana mengimplementasikannya di dokumen web. Dalam tutorial ini kita akan butuh 2 elemen, elemen pertama yaitu menu navigasi. Dan yang kedua adalah Content (bisa article, section, div). Jadi mari kita mulai. Buat dokumen HTML baru, dan berikan nama (terserah anda sih) demoscrollspy.html

Import Bootstraps. Hal yang pertama kita harus lakukan adalah mengimport bootstrap, baik css maupun javascriptnya. Kita juga perlu menggunakan jquery. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">< /script>

Elemen yang kita perlukan dalam Scrollspy adalah navigasi (