Bootstrap Scrollspy

In bootstrap, scrollspy is useful to highlight the navigation or list group items to indicate the currently active link based on the scroll position.

 

In bootstrap, the scrollspy will work with only nav components and list group items to show the active item based on the scroll. So, while creating the scrollspy you need to use either nav components or list group.

 

To create scrollspy in bootstrap, first create scrollable spying element (<body>) with data-spy = "scroll", data-target = "#ScrollNavbar" and optional data-offset = "0" attributes by including the navigation bar and scrollable content elements like as shown below.

 

Live Preview
<body style="position:relative" data-spy="scroll" data-target="#ScrollNavbar" data-offset="70">
    <nav id="ScrollNavbar" class="navbar navbar-light bg-light fixed-top">
       <a class="navbar-brand" href="#">Tutlane</a>
       <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link" href="#sec1">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#sec2">Tutorials</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#sec3">Articles</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#sec4">Contact</a>
          </li>
       </ul>
    </nav>
    <div id="sec1">
       <h2>Home</h2>
       <p>...</p>
    </div>
    <div id="sec2">
       <h2>Tutorials</h2>
       <p>...</p>
    </div>
    <div id="sec3">
       <h2>Articles</h2>
       <p>...</p>
    </div>
    <div id="sec4">
       <h2>Contact</h2>
       <p>...</p>
    </div>
</body>

If you observe the above example, we added data-spy = "scroll" attribute to the element (<body>) to indicate the scrollable area, the data-target attribute to connect nav component with id or class to scrollable area and the data-offset attribute to specify the number of pixels to offset from top based on the position of scroll.

 

The bootstrap scrollspy requires relative positioning that’s why we added position: relative; style property to the spying element (<body>).

 

The scrollspy require scrollable elements ID must match with the links of nav component list items. If you observe the above example, the scrollable element <div id="sec1"> Id matches with the link of navbar <a href = "#sec1"> list item.

 

The above example will return the result like as shown below.

 

Bootstrap scrollspy example result

Bootstrap Scrollspy Vertical Menu

We can create vertical menu scrollspy by using navigation pills like as shown below.

 

Live Preview
<body style="position:relative" data-spy="scroll" data-target="#ScrollNavbar" data-offset="1">
   <div class="container-fluid">
      <div class="row">
         <div class="col-2">
            <nav id="ScrollNavbar" class="navbar navbar-light">
              <ul class="nav nav-pills flex-column" style="position:fixed; top:20px">
                <li class="nav-item">
                  <a class="nav-link active" href="#sec1">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#sec2">Tutorials</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#sec3">Articles</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#sec4">Contact</a>
                </li>
              </ul>
            </nav>
         </div>
         <div class="col-8">
            <div id="sec1">
               <h2>Home</h2>
               <p>...</p>
            </div>
            <div id="sec2">
               <h2>Tutorials</h2>
               <p>...</p>
            </div>
            <div id="sec3">
               <h2>Articles</h2>
               <p>...</p>
            </div>
            <div id="sec4">
               <h2>Contact</h2>
               <p>...</p>
            </div>
         </div>
      </div>
   </div>
</body>

The above example will return the result as shown below.

 

Bootstrap scrollspy vertical menu example result

Bootstrap Create Scrollspy via JavaScript

In bootstrap, we can create the scrollspy by using JavaScript with scrollspy() method like as shown below.

 

Live Preview <script>
   $(function() {
      $('body').scrollspy({
         target: '#ScrollNavbar',
         offset: 70
      })
   });
</script>

This is how we can use the scrollspy to highlight the navigation or list group items to indicate the currently active link based on the scroll position.