O'Reilly logo

Complete Bootstrap: Responsive Web Development with Bootstrap 4 by Ian Whitley, David Cochran, Bass Jobsen, Matt Lambert

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required