❮ Bootstrap V2 Navbar Bootstrap Dropdown Plugin ❯

Bootstrap Scrollspy Plugin

The Scrollspy plugin, which automatically updates the navigation plugin, updates the corresponding navigation targets based on the scrollbar's position. Its basic implementation adds the .active class to the navigation bar based on your scroll position.

If you want to reference this plugin's functionality individually, you need to reference scrollspy.js. Alternatively, as mentioned in the Bootstrap Plugins Overview chapter, you can reference bootstrap.js or the compressed bootstrap.min.js.

Usage

You can add scrollspy behavior to the top navigation:

Through data attributes: Add data-spy="scroll" to the element you want to spy on (usually the body). Then add the attribute data-target with the ID or class of the parent element of the Bootstrap .nav component. To ensure it works correctly, you must ensure that the main content of the page has elements with IDs that match the links you want to spy on.
```
<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>
```
Through JavaScript: You can call the scrollspy via JavaScript, select the element to spy on, and then call the .scrollspy() function:
```
$('body').scrollspy({ target: '.navbar-example' })
```

Example

The following example demonstrates using the Scrollspy plugin through data attributes:

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Tutorial Name</a>
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
            <li><a href="#ios">iOS</a></li>
            <li><a href="#svn">SVN</a></li>
            <li class="dropdown">
                <a href="#" id="navbarDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu"
                    aria-labelledby="navbarDrop1">
                    <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                    <li><a href="#ejb" tabindex="-1">ejb</a></li>

<li class="divider"></li>
<li><a href="#spring" tabindex="-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">iOS</h4>
    <p>iOS is a mobile operating system developed and distributed by Apple Inc. It was first released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, sharing the Darwin foundation. OS X is used on Apple's Macintosh computers, while iOS is Apple's mobile version.</p>
    <h4 id="svn">SVN</h4>
    <p>Apache Subversion, commonly abbreviated as SVN, is an open-source version control system software. Subversion was created by CollabNet Inc. in 2000 but has since evolved into a project of the Apache Software Foundation, boasting a rich community of developers and users.</p>
    <h4 id="jmeter">jMeter</h4>
    <p>jMeter is an open-source testing software. It is a 100% pure Java application designed for load and performance testing.</p>
    <h4 id="ejb">EJB</h4>
    <p>Enterprise Java Beans (EJB) is a development architecture for creating highly scalable and robust enterprise-level applications, deployed on J2EE compatible application servers such as JBOSS, Web Logic, etc.</p>
    <h4 id="spring">Spring</h4>
    <p>The Spring Framework is an open-source Java platform that provides comprehensive infrastructure support for rapidly developing powerful Java applications.</p>
    <p>The Spring Framework was initially written by Rod Johnson and was first released under the Apache 2.0 license in June 2003.</p>
</div>

<div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li class="active"><a href="#ios">iOS</a></li> <li><a href="#svn">SVN</a></li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#jmeter" tabindex="-1">jmeter</a></li> <li><a href="#ejb" tabindex="-1">ejb</a></li> <li class="divider"></li> <li><a href="#spring" tabindex="-1">spring</a></li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#myScrollspy" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <div class="section"> <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);"> × Delete this section</a></small> </h4> <p>iOS is a mobile operating system developed and distributed by Apple Inc. It was initially released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, sharing the Darwin foundation. OS X is the operating system for Apple's Macintosh computers, while iOS is the Apple's mobile version.</p> </div> <div class="section"> <h4 id="svn">SVN<small></small></h4> <p>Apache Subversion, commonly abbreviated as SVN, is an open-source version control system software. Subversion was created by CollabNet in 2000. However, it has since evolved into a project of the Apache Software Foundation, thus boasting a rich community of developers and users.</p> </div> <div class="section"> <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);"> × Delete this section</a></small> </h4> <p>jMeter is an open-source testing software. It is a 100% pure Java application designed for load and performance testing.</p> </div> <div class="section"> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans (EJB) is a development architecture for creating highly scalable and robust enterprise-level applications, deployed on J2EE compliant application servers such as JBOSS, Web Logic, etc.</p> </div> <div class="section"> <h4 id="spring">Spring</h4> <p>The Spring Framework is an open-source Java platform that provides comprehensive infrastructure support for developing robust Java applications quickly.</p> <p>The Spring Framework was initially written by Rod Johnson and was first released under the Apache 2.0 license in June 2003.</p> <li><a href="#spring" tabindex="-1">spring</a></li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#myScrollspy" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <div class="section"> <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);"> × Delete this section</a></small> </h4> <p>iOS is a mobile operating system developed and distributed by Apple Inc. It was originally released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, sharing the Darwin foundation. OS X is used on Apple's desktops and laptops, while iOS is the version for mobile devices.</p> </div> <div class="section"> <h4 id="svn">SVN<small></small></h4> <p>Apache Subversion, commonly referred to as SVN, is an open-source version control system. Subversion was created by CollabNet Inc. in 2000, but it has since been developed under the Apache Software Foundation, fostering a large community of developers and users.</p> </div> <div class="section"> <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);"> × Delete this section</a></small> </h4> <p>jMeter is an open-source testing software. It is a 100% pure Java application designed for load and performance testing.</p> </div> <div class="section"> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans (EJB) is a development architecture for creating highly scalable and robust enterprise applications, deployed on J2EE compliant application servers such as JBOSS, Web Logic, etc.</p> </div> <div class="section"> <h4 id="spring">Spring</h4> <p>The Spring Framework is an open-source Java platform that provides comprehensive infrastructure support for developing robust Java applications quickly and easily.</p> <p>The Spring Framework was initially written by Rod Johnson and was first released under the Apache 2.0 license in June 2003.</p> </div> </div> <span id="activeitem" style="color:red;"></span> <script> $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#myScrollspy").scrollspy(); $('#myScrollspy').on('activate.bs.scrollspy', function () { var currentItem = $(".nav li.active > a").text(); $("#activeitem").html("Currently viewing - " + currentItem); }) }); </script>

});
</script>

Results are shown below:

More Examples

Creating Horizontal Scrollspy

The following example demonstrates how to create a horizontal scrollspy:

Example

<!-- The navbar: 
   used to jump to a section in the scrollable area --><nav
        class="navbar navbar-inverse navbar-fixed-top">...  &lt;ul class="nav
   navbar-nav">    <li><a href="#section1">Section 1</a></li>   
        ...</nav><!-- The scrollable area --><div data-spy="scroll"
        data-target=".navbar" data-offset="12">  &lt;!-- Section 1
   -->  <div id="section1">   
        <h1>Section 1</h1>    <p>Try to scroll this page and look at
        the navigation bar while scrolling!</p> 
        </div>  ...</div>

How to Create Vertical Scrollspy

The following example demonstrates how to create a vertical scrollspy:

Example

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20"> 
        <div class="container">    <div class="row">     
        <nav class="col-sm-3" id="myScrollspy">       
        <ul class="nav nav-pills nav-stacked">         
        <li><a href="#section1">Section 1</a></li>         
        ...       
        </ul>      </nav>      <div
        class="col-sm-9">        <div id="section1">           <h1>Section 1</h1>          <p>Try to
        scroll this page and look at the navigation list while scrolling!</p>        </div>
                ...      </div>    </div> 
        </div></body>

❮ Bootstrap V2 Navbar Bootstrap Dropdown Plugin ❯