Bootstrap memiliki feature scrollspy. Seperti namanya scrollspy ini bertugas mengamati scroll kemudian sesuai hasil pengamatan melakukan update ke menu navigasi sesuai posisi scroll.

Contoh coding navigasinya adalah seperti berikut ini:
<nav id=”navku” class=”navbar navbar-default” role=”navigation”>
    <div class=”container-fluid”>
        <div class=”navbar-header”>
                <button class=”navbar-toggle” type=”button” data-toggle=”collapse” data-target=”#navbarlink”>
                    <span class=”icon-bar”></span>
                    <span class=”icon-bar”></span>
                    <span class=”icon-bar”></span>
                </button>
                <a class=”navbar-brand” href=”#”>Proweb</a>
            </div>
            <!–/navbar-header–>
            <div  id=”navbarlink” class=”collapse navbar-collapse”>
                <ul class=”nav navbar-nav”>
                    <li class=”active”><a href=”#home”>Home</a></li>
                    <li><a href=”#about”>About</a></li>
                    <li><a href=”#service”>Service</a></li>
                    <li><a href=”#contact”>Contact</a></li>
                </ul>
            </div>
        </div>
        <!–/container-fluid–>
    </nav>

Kemudian contoh coding untuk area content adalah:
        <div data-spy=”scroll” data-target=”#navku” data-offset=”0″ class=”contoh-scrollspy”>
            <h4 id=”home”>Home</h4>
            <p>Penjelasan home
                <br/><img src=”http://proweb.co.id/pic/banner_depan_content_895.jpg”/>
            </p>

            <div id=”about”></div>
            <br/><br/>
            <h4>About</h4>
            <p>Penjelasan about
            <br/>
            <img src=”http://www.proweb.co.id/pic/fungsi_web-456.gif”/>
            </p>
            
            <div id=”service”></div>
            <br/><br/>
            <h4>Service</h4>
            <p>Penjelasan service
            <br/>
            <img src=”http://www.proweb.co.id/pic/paket_2014_350_content_892.jpg”>
            </p>

            <div id=”contact”></div>
            <br/><br/>
            <h4>Contact</h4>
             <form class=”form-horizontal”>
            <div class=”form-group”>
                <label for=”nama” class=”col-xs-2″>Nama</label>
                <div class=”col-xs-10″>
                    <input type=”text” name=”nama” class=”form-control” placeholder=”Nama anda” />
                </div>
            </div>

            <div class=”form-group”>
                <label for=”email”  class=”col-xs-2″>Email</label>
                <div class=”col-xs-10″>
                    <input type=”text” name=”email” class=”form-control” placeholder=”Email anda” />
                </div>
            </div>
        <div class=”form-group”>
                <label for=”pesan”  class=”col-xs-2″>Pesan</label>
                <div class=”col-xs-10″>
                    <textarea name=”pesan” class=”form-control”></textarea>
                </div>
            </div>    
            <div  class=”col-xs-10 col-xs-offset-2″>
                <button type=”submit” class=”btn btn-primary”>Kirim</button>
                <button type=”reset” class=”btn btn-default”>Reset</button>
            </div>
            </form>

            </div>

Coding lengkapnya adalah:
<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <title>Posisi Scroll</title>

    <link href=”css/bootstrap.min.css” rel=”stylesheet”>
    <style type=”text/css”>
    .contoh-scrollspy
    {
        position:relative;
        height:200px;
        margin-top:10px;
        overflow:auto
    }
    </style>

  </head>
  <body>
    
    <div class=”container”>
    <nav id=”navku” class=”navbar navbar-default” role=”navigation”>
    <div class=”container-fluid”>
        <div class=”navbar-header”>
                <button class=”navbar-toggle” type=”button” data-toggle=”collapse” data-target=”#navbarlink”>
                    <span class=”icon-bar”></span>
                    <span class=”icon-bar”></span>
                    <span class=”icon-bar”></span>
                </button>
                <a class=”navbar-brand” href=”#”>Proweb</a>
            </div>
            <!–/navbar-header–>
            <div  id=”navbarlink” class=”collapse navbar-collapse”>
                <ul class=”nav navbar-nav”>
                    <li class=”active”><a href=”#home”>Home</a></li>
                    <li><a href=”#about”>About</a></li>
                    <li><a href=”#service”>Service</a></li>
                    <li><a href=”#contact”>Contact</a></li>
                </ul>
            </div>
        </div>
        <!–/container-fluid–>
    </nav>
    
        <div data-spy=”scroll” data-target=”#navku” data-offset=”0″ class=”contoh-scrollspy”>
            <h4 id=”home”>Home</h4>
            <p>Penjelasan home
                <br/><img src=”http://proweb.co.id/pic/banner_depan_content_895.jpg”/>
            </p>

            <div id=”about”></div>
            <br/><br/>
            <h4>About</h4>
            <p>Penjelasan about
            <br/>
            <img src=”http://www.proweb.co.id/pic/fungsi_web-456.gif”/>
            </p>
            
            <div id=”service”></div>
            <br/><br/>
            <h4>Service</h4>
            <p>Penjelasan service
            <br/>
            <img src=”http://www.proweb.co.id/pic/paket_2014_350_content_892.jpg”>
            </p>

            <div id=”contact”></div>
            <br/><br/>
            <h4>Contact</h4>
             <form class=”form-horizontal”>
            <div class=”form-group”>
                <label for=”nama” class=”col-xs-2″>Nama</label>
                <div class=”col-xs-10″>
                    <input type=”text” name=”nama” class=”form-control” placeholder=”Nama anda” />
                </div>
            </div>

            <div class=”form-group”>
                <label for=”email”  class=”col-xs-2″>Email</label>
                <div class=”col-xs-10″>
                    <input type=”text” name=”email” class=”form-control” placeholder=”Email anda” />
                </div>
            </div>
        <div class=”form-group”>
                <label for=”pesan”  class=”col-xs-2″>Pesan</label>
                <div class=”col-xs-10″>
                    <textarea name=”pesan” class=”form-control”></textarea>
                </div>
            </div>    
            <div  class=”col-xs-10 col-xs-offset-2″>
                <button type=”submit” class=”btn btn-primary”>Kirim</button>
                <button type=”reset” class=”btn btn-default”>Reset</button>
            </div>
            </form>

            </div>
    
    </div>
    <!– /container –>

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
    <script src=”js/bootstrap.min.js”></script>
  </body>
</html>

Demo dapat dilihat di http://aris.proweb.asia/dist/coba28.html dengan tampilan seperti di bawah ini:

Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/javascript/#scrollspy .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Posisi scroll dengan scrollspy Bootstrap
× Ada yang dapat saya bantu ? Available on SundayMondayTuesdayWednesdayThursdayFridaySaturday