Scrollspy is a Bootstrap plugin that automatically updates navigation targets based on scroll position, ensuring that the navigation link always explicitly indicates which section of the page the user currently has in their viewport.
To make Scrollspy function properly, you need to satisfy a few core requirements:
.nav component or a Bootstrap .list-group.<body>, or a custom <div> with overflow-y: scroll) must possess the data-bs-spy="scroll" attribute.data-bs-target="#navId" attribute.href="#section1") must exactly resolve to standard element IDs in the scrollable content (id="section1").tabindex="0" to guarantee keyboard focus functionality.Here is an interactive example showing a scrollable <div> mapping vertically to a side navigation menu. As you manually scroll down through the text on the right, observe how the highlighted active link on the left seamlessly tracks your scrolling progress.
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
This is some carefully crafted inner content specifically meant for section 1.1. In a real world application, this text would naturally take up significantly more space detailing exactly how brilliant your product is, how smooth the implementation was, and basically generating all the leads.
More random filler text to make the scroll area longer. The longer it is, the easier it is to see the scrollspy trigger perfectly as you drag your mouse.
And now we have hit section 1.2! The navbar to the left should have snapped onto the 1.2 link reliably. You can also click the links directly, and the browser will automatically scroll to this very spot magically utilizing the native anchor point mechanics. Isn't that fantastic?
Extra spacing to enforce scrolling.
Welcome to Subject Matter 2, where we discuss even more wonderful things about web development, responsive fluid grids, and of course Bootstrap 5 documentation conventions. To have a reliable scrollspy experience, make certain you apply position: relative to the scrolling container, which is absolutely vital!
Adding more placeholder data because the browser genuinely requires substantial visual real estate to accurately fire off the intersection observers necessary to map the scroll coordinate events.
This represents the final main subject area in this demonstration. We are going to explore sub sections one more time to demonstrate deeply nested menu relationships.
Almost at the absolute bottom of the scrollable container at this point. Ensure that your final div contains enough content spacing beneath it, or the scrollspy may struggle to physically scroll far down enough to register the last nav link!
This is the final destination. You made it to the end of the scrollable box reliably. The scrollbar is exhausted and you are staring at Section 3.2.
<!-- Nested Navigation Menu -->
<nav id="navbar-example3" class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
</nav>
<!-- Scrollable Content Box -->
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" class="scrollable-content" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
</div>