How to Create Bootstrap 5 Scrollspy?

Scrollspy is the name to indicate the way to track or spy the position of the content based on the browser’s scroll bar. Though this is generally of not much use within the content, it is an elegant way to show the moving pill bar on the navigation menu. Especially on single page templates, it makes sense to highlight the menu based on the scroll bar’s position. Bootstrap offers a default component called scrollspy for this purpose. In this tutorial let us explore more on creating scrollspy using Bootstrap 5.

Bootstrap 5 Scrollspy

Below are some of the basic needs and features of scrollspy component:

• Scrollspy is a JavaScript plugin hence you should include Bootstrap script files for the scrollspy to work.
• You should use nav component to highlight the links.
• Individual menu items and also items within dropdown menu are highlighted.
• You should use “position: relative;” for the item to be traced for the scrollspy component to work.
• When used with the elements other than body of the content (like section or div), the height and “overflow-y:scroll;” should be exclusively defined.

Scrollspy can be used with navbar and listgroup components both in horizontal or vertical directions. It can also be used in a nested navbar setup. Let us create an example scrollspy using navbar component.

Creating Nav Bar

As you can see the in the demo, scrolling the content will highlight the corresponding menu item on the top. Let us first create a menu using navbar and nav component like the below code:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-warning" id="scrollspy">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src=" logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo">
Bootstrap 4 Demo Site</a>
<ul class="nav nav-pills mr-auto ml-auto">
<li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
<li class="nav-item"><a class="nav-link" href="#section3">Section 3</a></li>&nbsp;&nbsp;
</ul>
<!-- Start Search -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<!-- End Search -->
</nav>

First step is to identify the nav bar with a unique id, in this case we have used id=”scrollspy”. Secondly, each navigation item should be linked with unique ids. Here we have used “href=#section1”, “href=#section2” and “href=#section3” for tracking three menu items.

Creating Scrollable Content

Now the nav bar is ready with a unique id along with unique link references for each menu items. Let us create a div element containing three sections for tracking the three menu items.

<div data-spy="scroll" data-target="#scrollspy" data-offset="0" style="overflow-y: scroll; height: 800px; position:relative;">
<section class="sec1">
<h4 id="section1">Section 1</h4>
<p>Here is a content for section 1.</p>
<p>"Here is your content for section 1. Enter long content for covering 800px height”.</p></section>
<section class="sec2">
<h4 id="section2">Section 2</h4>
<p>Here is a content for section 2.</p>
<p>"Here is your content for section 2. Enter long content for covering 800px height”.</p>
</section>
<section class="sec3">
<h4 id="section3">Section 3</h4>
<p>Here is a content for section 3.</p>
<p>"Here is your content for section 3. Enter long content for covering 800px height”.</p>
</section>
</div>

In order to enable spying the nav bar, you should use “data-target=#scrollspy”. Here “#scrollspy” is the id of the nav bar. We have used “overflow-y:scroll;” and defined the height as 800px to show the scroll bar on the div element level. Inside the parent div element, let us create three sections. Each section has a h4 heading with the id corresponding to the menu item ids. For example, h4 of the section 1 has “id=section1” where section1 is the link reference for menu item “Section 1”.

Putting it Together

Making the nav bar and the div element together on a Bootstrap starter template will create a simple scrollspy page.

---

---