Bootstrap Scrollspy Plugin

Bootstrap Scrollspy Plugin (Advanced)

The Scrollspy Plugin
Scrollspy automatically updates navigation links based on scroll position, improving usability.

Important Note: Make sure the scrollable element has a height and position: relative for Scrollspy to work.

How To Create a Scrollspy

<nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <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>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example">
  <h4 id="section1">Section 1</h4>
  <p>Content for section 1...</p>
  <h4 id="section2">Section 2</h4>
  <p>Content for section 2...</p>
</div>

Scrollspy Vertical Menu

A vertical Scrollspy navigation can be created using the same data-bs-spy="scroll" method with a sidebar menu.

Important Note: The data-bs-target must correctly match the navigation container ID for proper functionality.

Conclusion

Bootstrap provides various plugins like Modal, Tooltip, Popover, and Scrollspy to enhance user experience and interactivity. These components not only make your websites more dynamic but also simplify complex functionalities with just a few lines of code.

Whether you’re building a form popup, adding helpful tooltips, or tracking scrolling on a single-page site, Bootstrap has a solution ready.

And remember, all these plugins are part of building a strong frontend foundation. To continue your Bootstrap journey, stay tuned for our next blog, where we will cover topics such as containers, colors, and other essential layout and styling tools. These concepts will help you structure and style your web pages like a pro!

Request more information

Bootstrap Scrollspy Plugin