ScrollSpy component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add ScrollSpy to the <body> element.

Bootsrap

<body data-bs-spy=[1] data-bs-target="#navbar-example">
  <!-- content -->
</body>

Drag options to blanks, or click blank then click option'

A"focus"

B"click"

C"hover"

D"scroll"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' or 'hover' instead of 'scroll' for data-bs-spy.

Forgetting to add the data-bs-spy attribute.

The data-bs-spy attribute must be set to "scroll" to enable ScrollSpy on the element.

2fill in blank

medium

Complete the code to specify the ScrollSpy target navigation element.

Bootsrap

<body data-bs-spy="scroll" data-bs-target=[1]>
  <!-- content -->
</body>

Drag options to blanks, or click blank then click option'

A"#navbar-example"

B".nav"

C".container"

D"#footer"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class selector when the navigation has an ID.

Using an unrelated selector like '#footer'.

The data-bs-target attribute should point to the ID of the navigation element that ScrollSpy will update. Here, #navbar-example is correct.

3fill in blank

hard

Fix the error in the ScrollSpy initialization code.

Bootsrap

<nav id="navbar-example" class="navbar">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#section1">Section 1</a>
    </li>
  </ul>
</nav>

<script>
  var scrollSpy = new bootstrap.ScrollSpy(document.body, {
    target: [1]
  })
</script>

Drag options to blanks, or click blank then click option'

Adocument.getElementById('navbar-example')

B"navbar-example"

C"#navbar-example"

Ddocument.querySelector('.navbar')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a DOM element instead of a selector string.

Omitting the '#' in the ID selector.

The target option must be a CSS selector string. Using "#navbar-example" correctly points to the navigation element by its ID.

4fill in blank

hard

Fill both blanks to create a ScrollSpy-enabled <nav> with correct attributes.

Bootsrap

<nav id="navbar-example" class="navbar navbar-light bg-light px-3" [1]=[2]>
  <ul class="nav nav-pills flex-column">
    <li class="nav-item">
      <a class="nav-link active" href="#item-1">Item 1</a>
    </li>
  </ul>
</nav>

Drag options to blanks, or click blank then click option'

Adata-bs-spy

B"scroll"

C"navbar"

Ddata-bs-target

Attempts:

3 left

💡 Hint

Common Mistakes

Using data-bs-target instead of data-bs-spy for the first blank.

Setting the value to "navbar" instead of "scroll".

The data-bs-spy attribute enables ScrollSpy, and it must be set to "scroll" to listen to scroll events.

5fill in blank

hard

Fill all three blanks to create a ScrollSpy with correct target and offset.

Bootsrap

<body data-bs-spy=[1] data-bs-target=[2] data-bs-offset=[3] tabindex="0">
  <!-- page content -->
</body>

Drag options to blanks, or click blank then click option'

A"scroll"

B"#navbar-example"

C"100"

D"#main-nav"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong selector for target like '#main-nav'.

Setting offset to a non-numeric string.

Omitting tabindex attribute which is needed for keyboard focus.

The data-bs-spy must be "scroll", the data-bs-target should point to the navigation ID #navbar-example, and data-bs-offset sets the scroll offset in pixels, here "100".

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