Assalamualaikum Wr. Wb
Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin.
Pada kesempatan kali ini kita akan belajar Scrollspy menggunakan Bootstrap 4. Sebelum mulai, apa sih itu Scrollspy???
Jadi Scrollspy itu biasanya digunakan untuk memperbarui tautan secara otomatis dalam daftar navigasi berdasarkan posisi scroll pada suatu halaman.
Scrollspy memiliki beberapa persyaratan untuk berfungsi dengan benar:
1. Harus digunakan pada komponen Navbar Bootstrap atau List group.
2. Scrollspy membutuhkan position: relative; pada elemen HTML yang biasanya dijadikan target, biasanya tag.
3. Tag “a” diperlukan dan harus menunjuk ke elemen dengan id=”” itu.
Ketika berhasil diterapkan, Navbar atau List group akan berubah, memindahkan kelas .active dari satu item menu ke item menu lainnya berdasarkan target yang terkait.
Pada tutorial kali ini, kita akan membuat halaman one page ntuk memulai, kita bisa lakukan dengan langkah sebagai berikut:
1. Buat template html pada umumnya.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
2. Panggil File-file pendukung Bootstrap dan susun menjadi seperti berikut ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Scrollspy</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
3. Tambahkan kode css untuk tagdan sisipkan pada tag.
<style>
body
{
position: relative;
}
</style>
4. Panggil component navbar Bootstrap,masukkan kedalam tagdan ubah target link teksnya.
<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="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#menu2">Menu 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#menu3">Menu 3</a> </li> <li class="nav-item"> <a class="nav-link" href="#menu4">Menu 4</a> </li> </ul> </nav>
5. Buat 4 halaman dengan tag
, buat di bawah navbar tadi. Kita buat 4, karena pada langkah 4 kita sudah setting ada 4 menu. Tambahkan masing-masing halaman attribute id=””. Masing-masing id tersebut mewakili tiap menu target link pada href=”” seperti pada langkah 4. Contohnya ada di bawah ini.
<div id="menu1" class="container-fluid bg-primary" style="padding-top:70px;padding-bottom:70px"> <h1>Menu 1</h1> <p>Ini adalah Scrollspy Component Bootstrap.</p> <p>Silahkan scroll halaman ini ke bawah atau ke atas dan lihat hasilnya.</p> </div> <div id="menu2" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px"> <h1>Menu 2</h1> <p>Ini adalah Scrollspy Component Bootstrap.</p> <p>Silahkan scroll halaman ini ke bawah atau ke atas dan lihat hasilnya.</p> </div> <div id="menu3" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px"> <h1>Menu 3</h1> <p>Ini adalah Scrollspy Component Bootstrap.</p> <p>Silahkan scroll halaman ini ke bawah atau ke atas dan lihat hasilnya.</p> </div> <div id="menu4" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px"> <h1>Menu 4</h1> <p>Ini adalah Scrollspy Component Bootstrap.</p> <p>Silahkan scroll halaman ini ke bawah atau ke atas dan lihat hasilnya.</p> </div>
6. Tambahkan html serta #menu1 sampai ke menu#4 bersamaan dengan tag body yang tadi sudah kita buat pada langkah 3. Tambahkan property css beserta valuenya dengan height:100%, tujuannya adalah membuat masing-masing
memiliki tinggi satu halaman browser. Jadinya seperti ini.
<style>
body, html, #menu1, #menu2, #menu3, #menu4
{
position: relative;
height: 100%;
}
</style>
7. Terakhir, tambahkan kode berikut ini pada tag, data-spy=”scroll” data-target=”.navbar” data-offset=”50″. Tujuannya adalah, supaya scrollspynya sudah bisa berjalan saat kita scroll halaman.
<body data-spy="scroll" data-target=".navbar" data-offset="50">
Dan…seperti inilah kode secara keseluruhan.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Scrollspy</title>
<style>
body, html, #menu1, #menu2, #menu3, #menu4
{
position: relative;
height: 100%;
}
</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="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu3">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu4">Menu 4</a>
</li>
</ul>
</nav>
<div id="menu1" class="container-fluid bg-primary" style="padding-top:70px;padding-bottom:70px">
<h1>Menu 1</h1>
<p>Ini adalah Scrollspy Component Bootstrap.</p>
<p>Silahkan scroll halaman ini ke bawah atau ke atas dan lihat hasilnya.</p>
</div>
<div id="menu2" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Menu 2</h1>
<p>Ini adalah Scrollspy Component Bootstrap.</p>
<p>Silahkan scroll halaman ini ke bawah atau ke atas dan lihat hasilnya.</p>
</div>
<div id="menu3" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Menu 3</h1>
<p>Ini adalah Scrollspy Component Bootstrap.</p>
<p>Silahkan scroll halaman ini ke bawah atau ke atas dan lihat hasilnya.</p>
</div>
<div id="menu4" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Menu 4</h1>
<p>Ini adalah Scrollspy Component Bootstrap.</p>
<p>Silahkan scroll halaman ini ke bawah atau ke atas dan lihat hasilnya.</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
Berikut hasil akhirnya, dimana ketika kita scroll content, maka menu akan ikut pindah.
Demikianlah…artikel pada kali ini. Akhir kata semoga bermanfaat ya…Selamat mempelajari dan sukses selalu. Amin.
Wassalamualaikum Wr. Wb.