Scrollspy Bootstrap

Scrollspy ini akan menyorot (highlight) menu ketika layar tampilan visitor sedang membuka bagian dari menu tersebut. Berikut ini sturktur kode yang dapat digunakan untuk membuat...


Beberapa situs menggunakan Scrollspy dengan beberapa alasan berbeda, salahsatunya adalah agar visitor dapat lebih mudah mengetahui menu mana dari bagian yang sedang dilihat. Cara kerjanya mirip seperti OnePage template, ketika klik menu maka akan diarahkan ke bagian tertentu masih di halaman yang sama tanpa memuat / reload halaman.

Scrollspy ini akan menyorot (highlight) menu ketika layar tampilan visitor sedang membuka bagian dari menu tersebut. Berikut ini sturktur kode yang dapat digunakan untuk membuat Scrollspy sederhana:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="https://www.posciety.com">Posciety.Com</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>    

<div id="section1" class="container-fluid">
  <h1>Section 1</h1>
  <p>Ini adalah section 1, ketika menuju ke bagian ini, perhatikan menu yang ada di navbar akan otomatis di highlight !</p>
  <p>Ini adalah section 1, ketika menuju ke bagian ini, perhatikan menu yang ada di navbar akan otomatis di highlight !</p>
</div>
<div id="section2" class="container-fluid">
  <h1>Section 2</h1>
  <p>Ini adalah section 2, ketika menuju ke bagian ini, perhatikan menu yang ada di navbar akan otomatis di highlight !</p>
  <p>Ini adalah section 2, ketika menuju ke bagian ini, perhatikan menu yang ada di navbar akan otomatis di highlight !</p>
</div>
<div id="section3" class="container-fluid">
  <h1>Section 3</h1>
  <p>Ini adalah section 3, ketika menuju ke bagian ini, perhatikan menu yang ada di navbar akan otomatis di highlight !</p>
  <p>Ini adalah section 3, ketika menuju ke bagian ini, perhatikan menu yang ada di navbar akan otomatis di highlight !</p>
</div>

Agar Scrollspy dapat terlihat sepenuhnya, pastikan navbar dibuat fixed. Selanjutnya, buatlah beberapa atribut di dalam tag <body><body data-spy="scroll" data-target=".navbar" data-offset="50"> terdapat data-spy dan data-target yang tidak biasanya, data-target adalah bagian mana yang akan dijadikan target, karena disini menggunakan navbar maka kita panggil .navbar.

Setelah itu, jangan lupa untuk mengatur body sebagai relatif position: relative; pada CSS. Simpan dan lihat hasilnya !


Jangan Lupa Share !!!

21
5 shares, 21 points

Apa Reaksimu ?

Bingung Bingung
1
Bingung
Kesal Kesal
9
Kesal
OMG OMG
1
OMG
Takut Takut
10
Takut
Keren Keren
8
Keren
Sedih Sedih
3
Sedih
Posciety Edu

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan artikel-artikel edukasi dunia yang mendidik. Dikelola oleh tim Posciety Edu.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki