Scrollspy Bootstrap

0

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.

ads by posciety

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

Artikel Lainnya
Berikan Komentar

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya