Holla Tech - Learn
Bootstrap 3: Scrollspy
 

To automatically update links in a navigation bar based on the scroll position, the scrollspy plugin can be used.

To create such a scrollspy:
1. Add  data-spy attribute with value “scroll” to the scrollable area (typically <body>).
2. Create a navigation bar and <div> elements for contents of navigation bar items.

For Example: 

<body data-spy=“scroll” data-offset=“20”>
<div class=“container”>
<nav class=“navbar navbar-inverse navbar-fixed-top”>
    <div class=“navbar-header”>
      <a class=“navbar-brand” href=“#”>Home</a>
    </div>
    <ul class=“nav navbar-nav”>
      <li class=“active”><a href=“#p0”>Part 0</a></li>
      <li><a href=“#p1”>Part 1</a></li>
      <li><a href=“#p2”>Part 2</a></li>
    </ul>
  </nav>
  <div id=“p0”>0: Scroll and See the Navigation Bar!</div>
  <div id=“p1”>1: Scroll and See the Navigation Bar!</div>
  <div id=“p2”>2: Scroll and See the Navigation Bar!</div>
</div>
</body> 

 

The scrollable area requires the CSS position property to be “relative” for scrollspy to work properly.
Scrollspy is a plugin, and is included in the Bootstrap JS file.  

TASK:
Paste the line of codes into a text editor and play around with the outputs. 

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT