Book Image

Bootstrap Site Blueprints

Book Image

Bootstrap Site Blueprints

Overview of this book

Table of Contents (16 chapters)
Bootstrap Site Blueprints
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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.

  1. Open index.html in your editor.

  2. Add these ScrollSpy attributes to the body tag:

    <body data-spy="scroll" data-target=".navbar">

    Note

    If you include more than one navbar in a page, you will need to be more specific with the data-target attribute—probably giving your ScrollSpy navbar an ID such as id="navbar-primary" and using that for the data-target value instead.

  3. With these new attributes in place, save the file, refresh your browser, and scroll up and down the page. You should see your main navigation respond as it should, indicating your position on the page as shown in the following screenshot:

Animating the scroll

Now, let's animate the page scrolls that will be triggered by clicking on the navbar page anchors. This requires adding...