Bootstrap Scrollspy

The Scrollspy can be used when you need to navigate to different sections of the same page.

Thus, as you scroll, the links in the navigation bar are automatically updated.

Bootstrap Basics Scrollspy

The following code will help you understand the creation of Scrollspy.

<!-- 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>
    ...
	</ul>
</nav>

<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Observe that as you scroll this page the navigation bar will show some changes!</p>
</div>
...
</body>

...

<li><a href="#section1">Section 1</a></li>

...

</ul>

</nav>

<h1>Section 1</h1>

<p>Observe that as you scroll this page the navigation bar will show some changes!</p>

</div>

...

</body>

Let’s try to understand the above code:

First thing we do to create a scrollspy is adding the data-spy="scroll" attribute to any element. This is generally the <body> element so that all of the page body can be added to the scrollspy
Next we add the data-target attribute. The value can be id or the class name of the navigation bar (.navbar). This makes sure that the navbar is connected with the scrollable area.
It is important that scrollable elements match the ID of the navbar’s list items (<div id="section1"> matches <a href="#section1">).

You can also set a data offset from the top for calculating the scroll position. This can be done using the data-offset attribute. This is essentially useful in cases when there’s inconsistency between the navbar items and the scrollable elements. The default offset is 10 pixels.
The data-spy="scroll" element requires relative positioning. This can be achieved using the CSS position property, with value set to “relative”.

Bootstrap Scrollspy Vertical Menu

Vertically aligned Scrollspy elements are quite common in many websites.

The code below illustrates how we can use Bootstrap’s vertical navigation pills for achieving this goal:

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

  <div class="container">
    <div class="row">
      <nav class="col-sm-3" id="myScrollspy">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#section1">Section 1</a></li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9">
        <div id="section1"> 
          <h1>Section 1</h1>
          <p> Observe that as you scroll this page the navigation bar will show some changes!</p>
        </div> 
        ...
      </div>
    </div>
  </div>
</body>

<li><a href="#section1">Section 1</a></li>

...

</ul>

</nav>

<h1>Section 1</h1>

<p> Observe that as you scroll this page the navigation bar will show some changes!</p>

</div>

...

</div>

</body>

Bootstrap Scrollspy Options

To pass options to Scrollspy elements, you can use the data attributes or JavaScript.

By a general rule, all you need to is set the data-* attribute where * is replace by the option. Here are the options that you can use for Scrollspy

Offset: Takes a number value. The default value is set as 10. Used to specify the number of pixels that need to offset from top for correct positioning of the scrollable items.

Bootstrap Scrollspy Methods

Bootstrap has provides useful methods for the elements to be used for their better control.

Here’s a list of the methods for the Scrollspy element:

.scrollspy(“refresh”): If there are any ongoing changes on the scrollspy element, you need to refresh the page to have those chanes reflected immediately. This can be done using this method. For any addition of removal in the scrollspy element, you can have the document refreshed using this method.

Bootstrap Scrollspy Events

There is just one considerable event for the scrollspy element. Here’s the description:

bs.scrollspy: Event of a new item being activated by the scrollspy.