Scrollspy Bootstrap 4

Introduction

Scrollspy is a JavaScript plugin included in Bootstrap 4 that highlights the active section of a webpage or navigation menu based on the scroll position. It enables users to easily navigate long pages and improves the overall user experience on the website.

Features

• Automatically detects the current section based on the scroll position
• Highlights the active section in the navigation menu
• Smooth scrolling animation to the target section
• Easy to use and implement with Bootstrap 4

Implementation

To use scrollspy in your website, you need to follow these steps:

1. Add the data-spy attribute to the navigation element that you want to apply scrollspy to. For example:

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#item-1">Item 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#item-2">Item 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#item-3">Item 3</a>
    </li>
  </ul>
</nav>

In this example, the data-spy attribute is added to the navbar element.

2. Add the data-target attribute to the section element that you want to link to the navigation item. For example:

<div id="item-1">Item 1 content</div>
<div id="item-2">Item 2 content</div>
<div id="item-3">Item 3 content</div>

3. Add the scrollspy JavaScript plugin to your website. You can either use the CDN or download the script file and include it in your website. For example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>

4. Initialize the scrollspy plugin in your JavaScript code. For example:

$('body').scrollspy({ target: '#navbar-example2' })

Conclusion

Scrollspy is a useful Bootstrap 4 plugin that makes it easy to navigate long pages and improve the user experience on your website. By highlighting the active section in the navigation menu, users can easily see where they are on the page and where they can go next. With just a few lines of code, you can add scrollspy to your website and enhance its functionality.