ScrollSpy component in Bootsrap - Mini Project: Build & Apply

Build a ScrollSpy Navigation with Bootstrap

📖 Scenario: You are creating a simple webpage with a navigation menu that highlights the current section as you scroll. This helps users know where they are on the page.

🎯 Goal: Build a webpage with a vertical navigation menu on the left and multiple content sections on the right. Use Bootstrap's ScrollSpy component to highlight the active menu item as the user scrolls through the sections.

📋 What You'll Learn

Use Bootstrap 5 CSS and JS via CDN

Create a vertical navigation menu with links to each section

Create at least 3 content sections with unique IDs

Enable ScrollSpy on the body element targeting the navigation menu

Ensure the navigation highlights the active section as you scroll

💡 Why This Matters

🌍 Real World

ScrollSpy is commonly used on documentation sites, blogs, and long webpages to help users know their position and navigate easily.

💼 Career

Knowing how to implement ScrollSpy with Bootstrap is useful for front-end developers building user-friendly navigation on content-rich websites.

1

Create the basic HTML structure with Bootstrap links

Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag. Include Bootstrap 5 CSS and JS from the official CDN inside the <head>. Add a <body> with a container <div> that will hold the navigation and content sections.

Bootsrap

Hint

Remember to include the Bootstrap CSS and JS links inside the <head> and set the lang attribute on the <html> tag.

2

Add vertical navigation menu with links to sections

Inside the container <div>, create a vertical navigation menu using a <nav> element with id="navbar-example" and class nav flex-column. Add three <a> links inside it with classes nav-link and href attributes #section1, #section2, and #section3. The link texts should be Section 1, Section 2, and Section 3 respectively.

Bootsrap

  
  
  Bootstrap ScrollSpy Example
  
  


  
    
      
    
  

Hint

Use a <nav> with id="navbar-example" and add three <a> tags with class nav-link and hrefs pointing to #section1, #section2, and #section3.

3

Add content sections with unique IDs

Below the navigation menu inside the container, add three <section> elements with id="section1", id="section2", and id="section3". Each section should have a heading <h2> with text Section 1, Section 2, and Section 3 respectively, and some placeholder paragraph text inside <p> tags.

Bootsrap

  
  
  Bootstrap ScrollSpy Example
  
  


  
    
      Section 1
      Section 2
      Section 3
    
    
      
    
    
      
    
    
      
    
  

Hint

Each section needs a unique id matching the nav links' hrefs. Add a heading and some text inside each section.

4

Enable ScrollSpy on the body targeting the navigation menu

Add the attribute data-bs-spy="scroll" to the <body> tag. Also add data-bs-target="#navbar-example" and tabindex="0" to the <body>. This activates Bootstrap's ScrollSpy to highlight the navigation links as you scroll through the sections.

Bootsrap

  
  
  Bootstrap ScrollSpy Example
  
  


>
  
    
      Section 1
      Section 2
      Section 3
    
    
      Section 1
      This is the content for section 1. Scroll down to see more sections highlighted in the navigation.
    
    
      Section 2
      This is the content for section 2. Keep scrolling to see the navigation update.
    
    
      Section 3
      This is the content for section 3. The navigation highlights this section when visible.
    
  

Hint

Add data-bs-spy="scroll", data-bs-target="#navbar-example", and tabindex="0" attributes to the <body> tag to enable ScrollSpy.

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