Prev Next

BS5 Scrollspy

Bootstrap 5 Scrollspy enables navigation elements to highlight automatically as you scroll through the page sections.

Key Topics

Basic Scrollspy

Activate Scrollspy on an element by adding the data-bs-spy="scroll" and data-bs-target attributes.

<div data-bs-spy="scroll" data-bs-target="#list-example" class="scrollspy-example" tabindex="0">
    <h4 id="item-1">Item 1</h4>
    <p>Content for item 1.</p>
    <h4 id="item-2">Item 2</h4>
    <p>Content for item 2.</p>
</div>

Explanation: Use data-bs-spy="scroll" to enable Scrollspy on a container and specify the navigation target with data-bs-target.

Scrollspy with Navbar

Use Scrollspy with a navbar to highlight navigation links as you scroll.

<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" data-bs-offset="0" class="scrollspy-example" tabindex="0">
    <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>

Explanation: The data-bs-target attribute links the Scrollspy container to the navbar, highlighting the appropriate links.

Scrollspy Offsets

Adjust Scrollspy offsets using the data-bs-offset attribute for precise positioning.

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="50" class="scrollspy-example" tabindex="0">
    <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>

Explanation: The data-bs-offset attribute adjusts the scroll position for better alignment with the navigation links.

Complete Scrollspy Example

Here is a complete example of Scrollspy with a navbar, offsets, and sections.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Scrollspy Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav id="navbar-example" class="navbar navbar-dark bg-dark fixed-top">
        <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>
        </ul>
    </nav>
    <div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="50" class="scrollspy-example" tabindex="0" style="padding-top: 70px;">
        <h4 id="item-1">Item 1</h4>
        <p>Content for item 1.</p>
        <h4 id="item-2">Item 2</h4>
        <p>Content for item 2.</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example combines Scrollspy with a fixed navbar and offsets for a complete demonstration.

Key Takeaways

  • Enable Scrollspy with data-bs-spy="scroll".
  • Link to navigation targets using data-bs-target.
  • Use data-bs-offset to adjust alignment with sections.
Prev Next