Beranda Blogger Bootstrap Menggunakan Bootstrap ScrollSpy
BGS 22 Agustus 2023

Menggunakan Bootstrap ScrollSpy

Pada posting kita kali ini akan melanjutkan posting sebelumnya yang telah dibahas yaitu menggunakan Bootstrap pada templat Blogger, tetapi penggunaannya telah dilakukan pembaruan ke Bootstrap 5 seperti dibahas pada posting mengganti Bootstrap 4 ke Bootstrap 5 pada template Blogger.

Cara kerjanya

Scrollspy mengaktifkan kelas .active pada elemen (<a>) saat elemen dengan id yang direferensikan oleh href digulir ke tampilan. Scrollspy paling baik digunakan bersama dengan komponen Bootstrap nav atau list-group, tetapi juga akan berfungsi dengan elemen apa pun di halaman saat ini.

  • Untuk memulai, scrollspy memerlukan dua hal: navigasi, grup daftar, atau kumpulan tautan sederhana, plus wadah yang dapat digulir. Kontainer yang dapat digulir dapat berupa <body> atau elemen khusus dengan mengatur height dan overflow-y: scroll.
  • Pada container yang dapat digulir, tambahkan data-bs-spy="scroll" dan data-bs-target="#navId" dengan navId adalah id unik dari navigasi terkait. Jika tidak ada elemen yang dapat difokuskan di dalam elemen, pastikan juga menyertakan tabindex="0" untuk memastikan akses keyboard.
  • Saat kita menggulir container "spied", kelas .aktif ditambahkan dan dihapus dari tautan dalam navigasi terkait. Tautan harus memiliki target id yang dapat diselesaikan, jika tidak maka akan diabaikan. Misalnya, <a href="#home">home</a> harus sesuai dengan sesuatu di DOM seperti <div id="home"></div>
  • Elemen target yang tidak terlihat akan diabaikan. Lihat bagian Elemen tak terlihat di bawah ini.

Melalui atribut data

Agar dengan mudah menambahkan scrollspy ke navigasi bilah atas, tambahkan data-bs-spy="scroll" ke elemen yang ingin kita spy (biasanya ini adalah ). Kemudian tambahkan atribut data-bs-target dengan id atau nama kelas dari elemen induk dari setiap komponen Bootstrap .nav.

<body data-bs-spy="scroll" data-bs-target="#navbar">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" id="navbar">
Referensi : Bootstrap Scrollspy
Posting Lebih Baru
Posting Lama

Tidak ada komentar:

Posting Komentar

Terima kasih telah berkunjung dan membaca artikel ini. Silahkan berikan saran dan pertanyaan di kolom berikut ini.