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 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:
Scrollspy pada menu vertikalSelain pada navbar kita juga dapat membuat scrollspy dengan ditempatkan pada menu vertikal (dalam hal ini kita menggunakan class <!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-groupNah, 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. |