Home / Bootstrap / Tutorial Bootstrap Bagian 16: Membuat Scrollspy Dengan Bootstrap

Tutorial Bootstrap Bagian 16: Membuat Scrollspy Dengan Bootstrap

Lanjutan tutorial kali ini, kita akan membahas tentang cara membuat scrollspy dengan bootstrap. Scrollspy umumnya digunakan oleh website yang single page dengan menggunakan satu halaman untuk menampung semua content website. Halaman akan dibagi menjadi beberapa section/bagian yang berisi content per item menu. Jadi walaupun hanya terdiri dari satu halaman, website masih memiliki navigasi menu.

Dalam penerapannya, sewaktu scroll pada browser digeser keatas atau ke bawah maka navigasi (item menu) akan otomatis aktif ketika content pada sectionnya sedang ditampilkan. Begitu juga ketika item menu pada navigasi di klik maka otomatis posisi halaman akan berada di contentnya.

Bootstrap sudah menyediakan class untuk membuat scrollspy. Contoh cara membuat srcollspy dengan bootstrap sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Membuat scrollspy dengan Bootstrap - ITGeek.id</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
    ul.nav-pills {
                top: 200px;
                position: fixed;
        }
    div.col-sm-8 div {
                height: 500px;
                font-size: 18px;
                padding: 30px;
    }
</style>
</head>
<body data-spy="scroll" data-target="#scrollspy">
<div class="container-fluid" style="height: 250px;text-align:center;padding:80px;">
    <div class="row">
        <div class="col-md-12">
        <h1>Banner</h1>
        </div>
    </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-8">
        <div id="home">    
        <h2><strong>Home</strong></h2>
        <p>Selamat datang di ITGeek. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
      <div id="about">    
        <h2><strong>About Us</strong></h2>
        <p>About ITGeek.id Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
            <div id="contact">    
        <h2><strong>Contact Us</strong></h2>
        <p>Contact us. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
            <div id="services">    
        <h2><strong>Services</strong></h2>
        <p>Services. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>     
    </div>
        <nav class="col-sm-4" id="scrollspy">
      <ul class="nav nav-pills nav-stacked">
        <h2>MAIN MENU</h2>
                <li><a href="#home" class="active">Home</a></li>
        <li><a href="#about">About Us</a></li>
                <li><a href="#contact">Contact Us</a></li>
                <li><a href="#services">Services</a></li>
      </ul>
    </nav>
  </div>
</div>
<script src="js/jQuery v3.2.0.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
  • Untuk membuat scrollspy, terlebih dahulu di baris 18 pada tag body ditambahkan atribut data-spy yang berisi scroll dan data-target yang berisi #srcollspy. Isi dalam data-target ini nantinya dijadikan id navigasi pada item menu yang menampilkan content.
  • Untuk membuat section(bagian) content yang pertama dimulai dan baris 29 sampai 33. Pada baris 29 terlebih dahulu dibuat class yang berisi id content. Pada contoh ini, id content yang pertama adalah home dan baris 20 sampai 32 berisi content/isi pada section home.
  • Pada contoh ini, halaman dibagi menjadi empat section. Baris 34 sampai 38 untuk membuat section yang kedua dengan id=about, kemudian baris 39 sampai 42 untuk membuat section yang ketiga dengan id=contact dan section yang terakhir dengan id services pada baris 43 sampai 48.
  • Baris 50 sampai 58 membuat navigasi yang nantinya berisi link item menu. Pada baris 50 terlebih dahulu di buat class nav dan dengan id scrollspy <nav class=”col-sm-4″ id=”scrollspy”>. col-sm-4 adalah jumlah grid/kolom grid yang dijadikan tempat navigasi menu. Silakan lihat pembahasan sebelumnya tentang penggunaan grid bootstrap untuk mengatur layout halaman website.

Hasil contoh scrollspy dengan bootstrap seperti gambar dibawah

Tampilan hasil scrollspy dengan bootstrap

Seperti gambar diatas, website hanya menggunakan satu halaman. Ketika halaman di tampilkan maka otomatis posisi section/bagian halaman berada paling atas(home), jika scroll di geser ke bawah maka otomatis item menu pada navigasi akan aktif berdasarkan content yang di tampilkan. Begitu juga ketika kita langsung mengklik item menu maka posisi content halaman akan secara otomatis mengarah ke content itemnya.

Demikian tutorial cara membuat scrollspy dengan bootstrap.

Comments

comments

About admin

admin
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 12: Membuat Pills dan Tabs dengan Bootstrap

Tutorial sebelumnya kita sudah membahas tentang Membuat Navigation Bar(Navbar) dan Dropdown Menu dengan Bootstrap. Kali …

Leave a Reply

Your email address will not be published. Required fields are marked *

Inline
Inline