Bootstrap Scrollspy

Overview

Scrollspy automatically updates navigation links based on scroll position.

Basic Usage

<nav id="navbar" class="navbar navbar-light bg-light">
    <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" data-bs-offset="0" class="scrollspy-example">
    <h4 id="section1">Section 1</h4>
    <p>Content...</p>
    <h4 id="section2">Section 2</h4>
    <p>Content...</p>
</div>

JavaScript API

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
    target: '#navbar',
    offset: 10
});

// Refresh
scrollSpy.refresh();

// Dispose
scrollSpy.dispose();

Next Steps

Next: Bootstrap Offcanvas →