Scrollspy pada Bootstrap 4

Kita melanjutkan pembahasan mengenai  Bootstrap 4  dan kita akan membahas mengenai scrollspy. Dari namanya kita memahami bahwa kita akan mengintai scroll yang digunakan pengunjung website kita kemudian menampilkan hasilnya di suatu tempat yang mudah dilihat dan untuk contoh kali ini kita akan menempatkan informasi hasil pengintaian scrollnya di sebelah kiri sebagai navigasi.

Langkah-langkah membuat scrollspy pada Bootstrap 4 ini adalah

1. Style untuk body:
   

   body {
   position: relative;
   }

   

2. Style untuk navigasi
   

   ul.nav-pills {
   top: 20px;
   position: fixed;
   }

   

3. Style untuk bagian yang akan diintai:
   

   p
   {
   padding-top: 20px;
   }

   

4. Tag untuk body:

   <bodydata-spy=”scroll”data-target=”#pengintaiku”data-offset=”1″>

   

5. HTML untuk navigasi:
   

   <nav class=”col-sm-2 col-3″ id=”pengintaiku”>
   <ul class=”nav nav-pills flex-column”>
   <li class=”nav-item”>
   <a class=”nav-link active” href=”#kutipan1″>Kutipan 1</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link” href=”#kutipan2″>Kutipan 2</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link” href=”#kutipan3″>Kutipan 3</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link” href=”#kutipan4″>Kutipan 4</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link” href=”#kutipan5″>Kutipan 5</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link” href=”#kutipan6″>Kutipan 6</a>
   </li>
   </ul>
   </nav>

   

6. HTML untuk yang diintai:
   

   <p id=”kutipan1″>
   <h1>Kutipan 1</h1>
   <img class=”d-block img-fuild” src=”./img/car1.jpg”>
   </p>
   <p id=”kutipan2″>
   <h1>Kutipan 2</h1>
   <img class=”d-block img-fuild” src=”./img/car2.jpg”>
   </p>
   <p id=”kutipan3″>
   <h1>Kutipan 3</h1>
   <img class=”d-block img-fuild” src=”./img/car3.jpg”>
   </p>
   <p id=”kutipan4″>
   <h1>Kutipan 4</h1>
   <img class=”d-block img-fuild” src=”./img/car4.jpg”>
   </p>
   <p id=”kutipan5″>
   <h1>Kutipan 5</h1>
   <img class=”d-block img-fuild” src=”./img/car5.jpg”>
   </p>
   <p id=”kutipan6″>
   <h1>Kutipan 6</h1>
   <img class=”d-block img-fuild” src=”./img/car6.jpg”>
   </p>

   

7. Hasil dapat dilihat di https://bs4.aris.proweb.asia/kutip00.html dengan tampilan seperti berikut ini:
   
   
   
   
   

Informasi lebih lanjut silahkan mengunjungi
1. https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp
2. https://getbootstrap.com/docs/4.3/components/scrollspy/

Kunjungi www.proweb.co.id untuk menambah wawasan anda.