Bootstrap Scrollspy

Bootstrap Scrollspy is a feature of Bootstrap framework that allows users to automatically update navigation links based on the position of the scroll.

This way, users can track their location on a page as they scroll and easily navigate to different sections.

How it works

Bootstrap Scrollspy uses JavaScript and HTML to track the position of the scroll and update the navigation links accordingly.

The navigation links are defined in an unordered list <ul> and each list item <li> represents a section on the page.

When the user scrolls to a section, the corresponding list item is updated with an active class, indicating which section the user is currently viewing.

Setting up Scrollspy

To set up Scrollspy, follow these steps:

  • Add a data-spy attribute to the parent container (body) and set the value to scroll.
  • Add an id to each section on the page, which will be used to match with the corresponding navigation link.
  • In the navigation list, add data-target attributes to the list items and set the value to the id of the section it represents.
  • Add a data-offset attribute to the parent container (body) to specify the number of pixels to offset from the top when calculating the position of the scroll.

Here's an example of setting up Scrollspy with the default Bootstrap navigation:

<body data-spy="scroll" data-offset="50">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
            <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>
        </ul>
    </nav>
    <div id="section1" class="section">
        <h1>Section 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
    </div>
    <div id="section2" class="section">
        <h1>Section 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
    </div>
    <div id="section3" class="section">
        <h1>Section 3</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
    </div>
</body>

Customizing the active class

By default, Bootstrap adds the active class to the active navigation link.

If you want to customize the class, you can do so by adding a data-active-class attribute to the parent container (body) and setting the value to your desired class name.

<body data-spy="scroll" data-offset="50" data-active-class="custom-active">
    ...
</body>

Customizing the offset

The offset can be changed by adjusting the data-offset attribute on the parent container (body).

For example, to set the offset to 100 pixels, use the following code:

<body data-spy="scroll" data-offset="100">
    ...
</body>

Using Scrollspy with different navigation types

Bootstrap Scrollspy can be used with different types of navigation, such as a vertical navigation or a sidebar navigation.

To use Scrollspy with a different type of navigation, simply replace the default Bootstrap navigation code with your custom navigation code.

The basic structure of the navigation list and list items should remain the same, with the addition of the data-target attributes.

Conclusion

Bootstrap Scrollspy is a powerful tool for creating dynamic, user-friendly navigation on a page.

With just a few lines of code, you can add this feature to your website and make it easier for users to navigate to different sections.

Whether you're using the default Bootstrap navigation or a custom navigation, Bootstrap Scrollspy is a flexible and easy-to-use tool that will help improve the user experience on your website.

Bootstrap Basics