Adding ScrollSpy to the navbar

Let's configure our top navbar to indicate our location on the page. We'll add Bootstrap's ScrollSpy behavior to the navbar.

Note

Refer to Bootstrap's ScrollSpy plugin documentation at http://getbootstrap.com/javascript/#scrollspy.

By default, the ScrollSpy plugin requires a Bootstrap nav component. Bootstrap's navbar contains a nav component already. The relative position is required too. You should set position:relative; in your CSS for the element you're spying on. In our situation, we'll have to set the relative position for the body element.

You can easily initiate the ScrollSpy plugin by adding data-attributes in the HTML code. First add data-spy="scroll" to the element you want to spy and then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

Note

Data-attributes in HTML5 allow use to store extra information into standard semantic HTML elements. Read more...