Bootstrap Scrollspy

21 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Dynamic Scrollspy

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Scrollspy to automatically highlight navigation links as users scroll through page sections, perfect for long pages or documentation. We’ll pair scrollspy with images for a vibrant look.

What You’ll Learn

Creating a basic scrollspy
Using scrollspy with a fixed navbar
Adding smooth scrolling
Combining scrollspy with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Scrollspy

Bootstrap Scrollspy uses the data-bs-spy="scroll" attribute to monitor scrolling and highlight corresponding navigation links based on the visible section. It’s typically used with a navbar to track section IDs.

Assume Bootstrap CSS and JS are included in your project (we’ll skip the <link> and <script> tags as requested).

Step 2: Create a Basic Scrollspy

Start with a simple scrollspy using a navbar. Use this code:

<div class="container">
    <h3>Basic Scrollspy</h3>
    <nav class="navbar navbar-expand-lg bg-light mb-3">
        <div class="container-fluid">
            <div class="navbar-nav">
                <a class="nav-link active" href="#section1">Section 1</a>
                <a class="nav-link" href="#section2">Section 2</a>
            </div>
        </div>
    </nav>
    <div class="scrollspy-example" data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="0" style="height: 200px; overflow-y: scroll;">
        <div id="section1">
            <h4>Section 1</h4>
            <p>Content for section 1. Scroll to see the navigation highlight change.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div id="section2">
            <h4>Section 2</h4>
            <p>Content for section 2. Keep scrolling to navigate.</p>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Explanation:

container: Centers and constrains content.
navbar navbar-expand-lg bg-light: Creates a light-colored navbar.
nav-link with href="#section1": Links to section IDs.
scrollspy-example: Div with scrollable content.
data-bs-spy="scroll" data-bs-target=".navbar": Enables scrollspy, targeting the navbar.
data-bs-offset="0": Sets scroll offset for highlighting.
style="height: 200px; overflow-y: scroll;": Makes the content scrollable for testing.

Scrolling highlights the active nav link.

Step 3: Use Scrollspy with a Fixed Navbar

Apply scrollspy to a fixed navbar for a full-page effect. Try this:

<div class="container">
    <h3>Fixed Navbar Scrollspy</h3>
    <nav class="navbar navbar-expand-lg bg-primary fixed-top">
        <div class="container-fluid">
            <div class="navbar-nav">
                <a class="nav-link active text-white" href="#part1">Part 1</a>
                <a class="nav-link text-white" href="#part2">Part 2</a>
            </div>
        </div>
    </nav>
    <div data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
        <div id="part1" style="padding-top: 70px;">
            <h4>Part 1</h4>
            <p>Content for part 1. Scroll to see navigation updates.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
        </div>
        <div id="part2">
            <h4>Part 2</h4>
            <p>Content for part 2. Keep scrolling.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </div>
    </div>
</div>

Explanation:

navbar fixed-top bg-primary: Fixed navbar with blue background.
text-white: White links for visibility.
data-bs-spy="scroll" data-bs-target=".navbar": Tracks scrolling.
data-bs-offset="70": Accounts for navbar height.
style="padding-top: 70px;": Prevents content from hiding under the fixed navbar.

The navbar stays fixed, highlighting links as you scroll.

Step 4: Add Smooth Scrolling

Enhance scrollspy with smooth scrolling for better UX. Add this:

<div class="container">
    <h3>Smooth Scrollspy</h3>
    <nav class="navbar navbar-expand-lg bg-success mb-3">
        <div class="container-fluid">
            <div class="navbar-nav">
                <a class="nav-link active text-white" href="#smooth1">Section A</a>
                <a class="nav-link text-white" href="#smooth2">Section B</a>
            </div>
        </div>
    </nav>
    <div class="scrollspy-smooth" data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="0" style="height: 200px; overflow-y: scroll; scroll-behavior: smooth;">
        <div id="smooth1">
            <h4>Section A</h4>
            <p>Content for section A. Click links for smooth scrolling.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div id="smooth2">
            <h4>Section B</h4>
            <p>Content for section B. Enjoy smooth navigation.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
        </div>
    </div>
</div>

Explanation:

navbar bg-success: Green navbar for contrast.
scroll-behavior: smooth;: Enables smooth scrolling when clicking links.
data-bs-spy="scroll": Tracks scrolling for nav highlights.
style="height: 200px; overflow-y: scroll;": Scrollable content area.
Links trigger smooth scrolling to sections.

This improves navigation with smooth transitions.

Step 5: Combine with an Image

Pair scrollspy with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Project Scrollspy</h3>
            <p>Navigate project sections.</p>
            <nav class="navbar navbar-expand-lg bg-primary mb-3">
                <div class="container-fluid">
                    <div class="navbar-nav">
                        <a class="nav-link active text-white" href="#project1">Overview</a>
                        <a class="nav-link text-white" href="#project2">Details</a>
                    </div>
                </div>
            </nav>
            <div class="scrollspy-project" data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="0" style="height: 200px; overflow-y: scroll; scroll-behavior: smooth;">
                <div id="project1">
                    <h4>Overview</h4>
                    <p>Project overview content.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <div id="project2">
                    <h4>Details</h4>
                    <p>Project details content.</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into scrollspy (8 units) and image (4 units).
navbar bg-primary: Blue navbar with smooth scrolling.
data-bs-spy="scroll": Enables scrollspy.
scroll-behavior: smooth;: Smooth scrolling for nav links.
Uses a 200×150 green image for vibrancy.
img-fluid rounded: Responsive image with rounded corners.

The image suggests a project context.

Final Code

Here’s a combined example with varied scrollspy setups and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Scrollspy</h3>
            <nav class="navbar navbar-expand-lg bg-light mb-3">
                <div class="container-fluid">
                    <div class="navbar-nav">
                        <a class="nav-link active" href="#simple1">Section 1</a>
                        <a class="nav-link" href="#simple2">Section 2</a>
                    </div>
                </div>
            </nav>
            <div class="scrollspy-simple" data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="0" style="height: 200px; overflow-y: scroll;">
                <div id="simple1">
                    <h4>Section 1</h4>
                    <p>Content for section 1.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div id="simple2">
                    <h4>Section 2</h4>
                    <p>Content for section 2.</p>
                    <p>Consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Smooth Scrollspy</h3>
            <nav class="navbar navbar-expand-lg bg-success mb-3">
                <div class="container-fluid">
                    <div class="navbar-nav">
                        <a class="nav-link active text-white" href="#smoothA">Part A</a>
                        <a class="nav-link text-white" href="#smoothB">Part B</a>
                    </div>
                </div>
            </nav>
            <div class="scrollspy-smooth" data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="0" style="height: 200px; overflow-y: scroll; scroll-behavior: smooth;">
                <div id="smoothA">
                    <h4>Part A</h4>
                    <p>Content for part A.</p>
                    <p>Sed do eiusmod tempor incididunt.</p>
                </div>
                <div id="smoothB">
                    <h4>Part B</h4>
                    <p>Content for part B.</p>
                    <p>Ut enim ad minim veniam.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Documentation Scrollspy</h3>
            <p>Navigate documentation.</p>
            <nav class="navbar navbar-expand-lg bg-primary mb-3">
                <div class="container-fluid">
                    <div class="navbar-nav">
                        <a class="nav-link active text-white" href="#doc1">Intro</a>
                        <a class="nav-link text-white" href="#doc2">Guide</a>
                    </div>
                </div>
            </nav>
            <div class="scrollspy-doc" data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="0" style="height: 200px; overflow-y: scroll; scroll-behavior: smooth;">
                <div id="doc1">
                    <h4>Intro</h4>
                    <p>Introduction to the documentation.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div id="doc2">
                    <h4>Guide</h4>
                    <p>Step-by-step guide.</p>
                    <p>Consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A simple scrollspy with a light navbar and two scrollable sections.
A smooth-scrolling scrollspy with a green navbar and two scrollable sections.
A documentation scrollspy with a blue navbar, two scrollable sections, and a red 250×150 image.
All scrollspies are responsive, highlighting nav links as you scroll, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Scrollspy Docs for more options.
Try data-bs-smooth-scroll="true" for enhanced smooth scrolling.
Use scrollspy with Bootstrap’s sidebar for vertical navigation.

Conclusion

You’ve mastered Bootstrap Scrollspy! With attributes like data-bs-spy="scroll" and data-bs-target, plus striking images, you’ve created dynamic, scroll-responsive navigation. Keep experimenting to enhance your webpages.