Tutorial Bootstrap 4 #31 : Scrollspy Bootstrap 4

Setelah mempelajari progress bar pada bootstrap 4, selanjutnya pada tutorial bootstrap bagian ke tiga puluh satu ini kita akan belajar tentang sebuah komponen bootstrap lagi, Yaitu Scrollspy.
Scrollspy Bootstrap 4
Scrollspy adalah sebuah komponen bootstrap yang mampu mengubah atau mengupdate menu navigasi atau list group yang aktif, sesuai dengan posisi konten yang terlihat pada layar browser.
Bingung ? tenang, pada Tutorial Bootstrap 4 #31 ini akan dibuatkan juga contoh lengkapnya sehingga teman-teman bisa lebih mudah memahami maksud dan kegunaan dari scrollspy ini sendiri.
Contoh Scrollspy Pada Navbar
Misalnya kita ingin membuat sebuah website yang hanya memiliki 1 halaman, dimana pada halaman tersebut sudah kita buatkan beberapa menu pada navbar, misal ada home, tentang, dan kontak.
Data home, tentang dan kontak tersebut juga kita buatkan pada 1 halaman yang sama (bukan di halaman yang berbeda-beda).
Jadi pada saat halaman tersebut di scroll ke bawah, menu yang aktif juga akan langsung otomatis di update tergantung data apa yang sedang terlihat pada browser (home, tentang atau kontak).
Baca juga tutorial bootstrap 4 sebelumnya tentang navbar bootstrap.
Untuk membuat contoh scrollspy sederhana, silahkan teman-teman perhatikan contoh berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Scrollspy Dengan Bootstrap 4 - www.malasngoding.com</title> </head> <body data-spy="scroll" data-target="#scroll-ku" data-offset="1"> <nav id="scroll-ku" class="navbar navbar-light bg-light fixed-top"> <a class="navbar-brand" href="https://www.malasngoding.com/scrollspy-bootstrap-4">www.malasngoding.com - Tutorial Bootstrap 4 - Membuat Scrollspy</a> <ul class="nav nav-pills"> <li class="nav-item "> <a class="nav-link active" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#tentang">Tentang</a> </li> <li class="nav-item"> <a class="nav-link" href="#kontak">Kontak</a> </li> </ul> </nav> <div class="container" style="margin-top: 80px"> <h2 id="home">Home</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? </p> <hr> <h2 id="tentang">Tentang</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. </p> <hr> <h2 id="kontak">Kontak</h2> <p> Kontak malasngoding.com : <br/> <b>malasngoding@gmail.com</b> </p> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </html> |
dan saat dijalankan, maka hasilnya akan seperti berikut.

scrollspy bootstrap 4
Perhatikan menu navbar, link yang aktif akan terupdate otomatis mengikuti konten apa yang sedang tampil pada layar browser.
Contoh Scr0llspy Pada List Group
Selain navbar, kita juga bisa menerapkan scrollspy pada list group.
Silahkan baca juga tutorial sebelumnya tentang cara membuat list group.
Silahkan perhatikan contoh scrollspy menggunakan list group berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Scrollspy Dengan Bootstrap 4 - www.malasngoding.com</title> </head> <body > <center> <h3>Tutorial Membuat Scrollspy Dengan Bootstrap 4</h3> <h4><a href="https://www.malasngoding.com/scrollspy-pada-bootstrap-4/">www.malasngoding.com</a></h4> </center> <br/> <div class="container"> <div class="row"> <div class="col-lg-3"> <div id="scroll-ku" class="list-group"> <a class="list-group-item list-group-item-action" href="#home">Home</a> <a class="list-group-item list-group-item-action" href="#tentang">Tentang</a> <a class="list-group-item list-group-item-action" href="#kontak">Kontak</a> </div> </div> <div class="col-lg-9"> <div data-spy="scroll" data-target="#scroll-ku" data-offset="0" style="height: 300px;overflow-y: scroll;"> <h2 id="home">Home</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur? </p> <hr> <h2 id="tentang">Tentang</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora. </p> <hr> <h2 id="kontak">Kontak</h2> <p> Kontak malasngoding.com : <br/> <b>malasngoding@gmail.com</b> </p> </div> </div> </div> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </html> |
Dan jika dijalankan hasilnya akan seperti berikut.

scrollspy menggunakan list group
Untuk source code jadinya bisa teman-teman lihat pada link berikut.
DEMO Scrollspy Dengan List Group
Jika teman-teman ingin membaca dokumentasi dari bootstrap nya sendiri tentang scrollspy, teman-teman bisa baca di
https://getbootstrap.com/docs/4.3/components/scrollspy/
Oke, terima kasih sudah mengikuti Tutorial Bootstrap 4 #31 : Scrollspy Bootstrap 4, silahkan teman-teman bereksperimen lebih jauh. supaya lebih familiar dengan class-class bootstrap yang sudah dijelaskan di www.malasngoding.com. 😉
Tutorial Menarik Lainnya

Tutorial Bootstrap 4 #35 : Border Bootstrap 4


Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4


Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4

