ScrollSpy component in Bootsrap

Introduction

ScrollSpy helps you highlight menu items automatically as you scroll through a page. It makes navigation easier by showing where you are on the page.

You have a long page with sections and want the menu to update as you scroll.

You want users to know which part of the page they are reading.

You want a smooth navigation experience on a single-page website.

You want to create a table of contents that highlights the current section.

You want to improve user orientation on a documentation or tutorial page.

Syntax

Bootsrap

<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
  <!-- content with sections -->
</body>

Use data-bs-spy="scroll" on the container you want to watch for scrolling.

data-bs-target points to the navigation menu that will update.

Examples

Basic setup to enable ScrollSpy on the whole page body.

Bootsrap

<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
  <!-- page content -->
</body>

Navigation menu with links to page sections for ScrollSpy to highlight.

Bootsrap

<nav id="navbar-example" class="navbar">
  <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>

ScrollSpy on a scrollable div instead of the whole page.

Bootsrap

<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" tabindex="0" style="position: relative; height: 200px; overflow: auto;">
  <ul class="list-group">
    <li id="item-1" class="list-group-item">Item 1</li>
    <li id="item-2" class="list-group-item">Item 2</li>
    <li id="item-3" class="list-group-item">Item 3</li>
  </ul>
</div>

Sample Program

This example shows a fixed top navigation bar with links to three sections. As you scroll, the active link in the menu updates automatically.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap ScrollSpy Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      position: relative;
    }
    section {
      height: 500px;
      padding-top: 60px;
      border-bottom: 1px solid #ccc;
    }
  </style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="50" tabindex="0">
  <nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
    <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>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3</a>
      </li>
    </ul>
  </nav>

  <main class="container mt-5 pt-5">
    <section id="section1">
      <h2>Section 1</h2>
      <p>This is the first section of the page.</p>
    </section>
    <section id="section2">
      <h2>Section 2</h2>
      <p>This is the second section of the page.</p>
    </section>
    <section id="section3">
      <h2>Section 3</h2>
      <p>This is the third section of the page.</p>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Important Notes

Make sure the container with data-bs-spy="scroll" has position: relative or similar for ScrollSpy to work.

Use tabindex="0" on the scroll container to allow keyboard focus and proper event handling.

Adjust data-bs-offset to match your fixed header height for accurate highlighting.

Summary

ScrollSpy highlights navigation links based on scroll position.

Use data-bs-spy="scroll" and data-bs-target to connect scrolling and menu.

Works well for long pages with multiple sections and fixed navigation.

Practice

1. What is the main purpose of the Bootstrap ScrollSpy component?

easy

A. To lazy load images as you scroll

B. To create a fixed header at the top of the page

C. To add animations when scrolling

D. To highlight navigation links based on the page scroll position

Solution

1. Step 1: Understand ScrollSpy functionality

   ScrollSpy tracks which section is visible on the page while scrolling.

2. Step 2: Identify ScrollSpy's effect on navigation

   It highlights the corresponding navigation link to show the active section.

3. Final Answer:

   To highlight navigation links based on the page scroll position -> Option D

4. Quick Check:

   ScrollSpy = Highlight nav links on scroll [OK]

Hint: ScrollSpy links scroll position to nav highlights [OK]

Common Mistakes:

• Confusing ScrollSpy with fixed headers
• Thinking ScrollSpy adds animations
• Assuming ScrollSpy lazy loads content

2. Which attribute is required on the scrollable container to enable Bootstrap ScrollSpy?

easy

A. data-bs-spy="scroll"

B. data-bs-target="#navbar"

C. data-bs-toggle="scrollspy"

D. data-bs-scroll="true"

Solution

1. Step 1: Identify the attribute that activates ScrollSpy

   The attribute data-bs-spy="scroll" tells Bootstrap to watch scroll events.

2. Step 2: Differentiate from other attributes

   data-bs-target points to the nav but does not activate ScrollSpy itself.

3. Final Answer:

   data-bs-spy="scroll" -> Option A

4. Quick Check:

   Activate ScrollSpy = data-bs-spy="scroll" [OK]

Hint: Use data-bs-spy="scroll" to enable ScrollSpy [OK]

Common Mistakes:

• Using data-bs-toggle instead of data-bs-spy
• Confusing data-bs-target as activation attribute
• Adding non-existent data-bs-scroll attribute

3. Given this HTML snippet, what will happen when you scroll the page?

<body data-bs-spy="scroll" data-bs-target="#navbar">
  <nav id="navbar">
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
  </nav>
  <div id="section1">Content 1</div>
  <div id="section2">Content 2</div>
</body>

medium

A. The navbar will become fixed at the top when scrolling

B. The page will scroll automatically to section1 on load

C. The link for the section currently visible will be highlighted in the navbar

D. Nothing will happen because ScrollSpy requires JavaScript initialization

Solution

1. Step 1: Analyze the HTML snippet

   The body has data-bs-spy="scroll" and data-bs-target="#navbar" attributes.

2. Step 2: Check ScrollSpy initialization requirements

   Bootstrap 5 supports automatic initialization of ScrollSpy via data attributes without explicit JavaScript calls.

3. Step 3: Expected behavior

   The link corresponding to the section currently visible will be highlighted in the navbar as you scroll.

4. Final Answer:

   The link for the section currently visible will be highlighted in the navbar -> Option C

5. Quick Check:

   ScrollSpy highlights nav links based on scroll position [OK]

Hint: ScrollSpy highlights nav links automatically with data attributes [OK]

Common Mistakes:

• Thinking data attributes alone activate highlighting
• Expecting auto-scroll to sections on load
• Confusing with sticky/fixed navbar behavior

4. What is wrong with this ScrollSpy setup?

<div id="scrollArea" data-bs-spy="scroll" data-bs-target="#menu">
  <nav id="menu">
    <a href="#part1">Part 1</a>
    <a href="#part2">Part 2</a>
  </nav>
  <div id="part1">Content 1</div>
  <div id="part2">Content 2</div>
</div>

medium

A. The scrollable container #scrollArea needs a fixed height and overflow set

B. The nav element must be outside the scrollable container

C. The data-bs-target should point to #scrollArea, not #menu

D. The href attributes in nav links must be full URLs

Solution

1. Step 1: Check ScrollSpy container requirements

   ScrollSpy requires the scrollable container to have a fixed height and overflow: auto or scroll to detect scrolling.

2. Step 2: Identify missing CSS for #scrollArea

   The code lacks CSS to make #scrollArea scrollable, so ScrollSpy won't work properly.

3. Final Answer:

   The scrollable container #scrollArea needs a fixed height and overflow set -> Option A

4. Quick Check:

   Scrollable container needs height + overflow [OK]

Hint: Scrollable container must have fixed height and overflow [OK]

Common Mistakes:

• Not setting height and overflow on scroll container
• Placing nav outside scroll container unnecessarily
• Using wrong data-bs-target attribute
• Using full URLs in href instead of section IDs

5. You want to use ScrollSpy on a page with a fixed top navbar and multiple sections. Which combination of steps is correct to ensure ScrollSpy works properly?

hard

A. Add data-bs-spy="scroll" on navbar, set overflow: hidden; on body, and use full URLs in navbar links

B. Add data-bs-spy="scroll" and data-bs-target on body, set position: relative; on body, and ensure navbar links match section IDs

C. Add data-bs-spy="scroll" on each section, set position: fixed; on navbar, and use # only in links

D. Add data-bs-spy="scroll" on html, set overflow: scroll; on navbar, and use external links in navbar

Solution

1. Step 1: Enable ScrollSpy on the scroll container

   Usually, body is the scroll container, so add data-bs-spy="scroll" and data-bs-target there.

2. Step 2: Set position: relative; on the scroll container

   ScrollSpy requires the scroll container to have position: relative; for correct offset calculations.

3. Step 3: Ensure navbar links correspond to section IDs

   Links in the navbar must have hrefs matching the IDs of the page sections for ScrollSpy to highlight correctly.

4. Final Answer:

   Add data-bs-spy="scroll" and data-bs-target on body, set position: relative; on body, and ensure navbar links match section IDs -> Option B

5. Quick Check:

   ScrollSpy setup = data attributes + position + matching links [OK]

Hint: Set data attributes on body, position relative, matching hrefs [OK]

Common Mistakes:

• Adding data-bs-spy on wrong elements
• Forgetting position: relative on scroll container
• Using full URLs instead of section IDs in links
• Setting overflow on navbar instead of scroll container