WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Scrollspy Plugin (Advanced)


The Scrollspy Plugin

The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.


How To Create a Scrollspy

The following example shows how to create a scrollspy:

Example

<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
  <ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>

<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Google Maps provides a route planner!</p>
</div>
...

</body>
Try it Yourself »

Example Explained

First need to data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element).

Then adding the data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.

Note that scrollable elements must match the ID of the links inside the navbar's list items (<div id="section1"> matches <a href="#section1">).