Scrollspy Bootstrap: Bootstrap Tutorial #24

Pada pembahasan ini kita masih membahas mengenai Framework CSS yaitu bootstrap yang banyak digunakan saat ini. Bagian atau komponen bootstrap yang akan kita bahas pada tutorial kali ini adalah Scrollspy.

Scrollspy adalah komponen dari bootstrap yang dapat memperbarui menu navigasi atau list group yang aktif dengan otomatis sesuai dengan yang dilihat oleh pengguna.

Kalu masih bingung, silahkan teman – teman lihat contoh program dibawah ini:

Section Artikel

1 Scrollspy pada navbar
2 Scrollspy pada menu vertikal
3 Scrollspy pada list-group

Scrollspy pada navbar

<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  body {
      position: relative; 
  }
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Section 3</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Section 4
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#section41">Link 1</a>
        <a class="dropdown-item" href="#section42">Link 2</a>
      </div>
    </li>
  </ul>
</nav>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 1</h1>
  <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
  <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 2</h1>
  <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
  <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 3</h1>
  <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
  <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 1</h1>
  <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
  <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 2</h1>
  <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
  <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
</div>

</body>
</html>

Penjelasan:

Lebih Jelasnya silahkan klik link SCROLLSPY DEMO NAVBAR
Menambahkan Attribute data-spy="scroll" ke elemen yang harus digunakan sebagai area yang dapat digulir (seringkali ini adalah elemen body ).
Kemudian tambahkan attribut data-target="nilai", dengan nilai didalamnya adalah id element atau class element navbar.
Perhatikan bahwa elemen yang dapat digulir/scroll harus sesuai antara id area dengan id dari pemanggil ( <div id="section1" cocok dengan <a href="#section1">). Tanda # menandakan bahwa kita menggunakan id sebagai penanda, class juga dapat digunakan dengan mengganti # dengan . (titik).
Atribut data-offset="50" adalah opsional digunakan untuk menentukan jumlah piksel yang akan dihitung dari atas saat menghitung posisi gulirnya layar. Ini berguna ketika kita merasa bahwa tautan di dalam navbar status aktif berpindah terlalu cepat atau terlalu lambat saat melompat ke elemen lain. Defaultnya adalah 10 piksel.
NOTE: Element dengan attribute data-spy=”” memerlukan porperti CSS untuk posisi dengan nilai “relative” agar berfungsi dengan baik

Scrollspy pada menu vertikal

Selain pada navbar kita juga dapat membuat scrollspy dengan ditempatkan pada menu vertikal (dalam hal ini kita menggunakan class .col dan .row). Untuk cara pembuatan nya sendiri sama dengan pembuatan scrollspy pada navbar, lebih jelasnya lihat contoh dibawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
  body {
    position: relative;
  }
  ul.nav-pills {
    top: 20px;
    position: fixed;
  }
  div.col-8 div {
    height: 500px;
  }
  </style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">

<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-4" id="myScrollspy">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#section1">Section 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">Section 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">Section 3</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#section41">Link 1</a>
            <a class="dropdown-item" href="#section42">Link 2</a>
          </div>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9 col-8">
      <div id="section1" class="bg-success">    
        <h1>Section 1</h1>
          <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
      </div>
      <div id="section2" class="bg-warning"> 
        <h1>Section 2</h1>
          <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
      </div>        
      <div id="section3" class="bg-secondary">         
        <h1>Section 3</h1>
          <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
      </div>
      <div id="section41" class="bg-danger">         
        <h1>Section 4-1</h1>
          <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
      </div>      
      <div id="section42" class="bg-info">         
        <h1>Section 4-2</h1>
          <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Untuk lebih mengerti cara kerjanya silahkan lihat Scrollspy Demo vertikal menu.

Scrollspy pada list-group

Nah, scrollspy juga dapat digunakan pada list group dengan cara yang sama dengan navbar. Contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  body {
      position: relative; 
  }
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
   <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
     <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
  <h4 id="list-item-2">Item 2</h4>
   <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
     <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
  <h4 id="list-item-3">Item 3</h4>
   <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
     <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
  <h4 id="list-item-4">Item 4</h4>
   <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
     <p>Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir! Cobalah untuk menggulir bagian ini dan lihat bilah navigasi saat menggulir!</p>
</div>

</body>
</html>

Contoh lebih jelas Scrollspy pada list group di Demo Scrollspy listgroup

Sekian penjelasan dari saya mengenai scrollspy dari bootstrap versi 4, saya harap teman – teman dapat mengembangan dan menerapkan nya pada website teman – teman dengan sesuai kebutuhan.

terima kasih.

Scrollspy Bootstrap: Bootstrap Tutorial #24

Scrollspy pada navbar

Scrollspy pada menu vertikal

Scrollspy pada list-group

Popovers Bootstrap: Bootstrap Tutorial #23

Pagination Bootstrap: Bootstrap Tutorial #22

You may also like