Bootstrap - Scrollspy: A Beginner's Guide

Hello there, aspiring web developers! Today, we're going to dive into an exciting Bootstrap feature called Scrollspy. Don't worry if you're new to programming – I'll guide you through this topic step by step, just like I've done for my students over the years. So, grab a cup of coffee, and let's get started!

Bootstrap - Scrollspy

What is Scrollspy?

Before we jump into the technicalities, let's understand what Scrollspy is. Imagine you're reading a long article online, and as you scroll, the navigation menu automatically highlights the section you're currently reading. That's Scrollspy in action! It's a nifty little feature that enhances user experience by providing visual feedback on the user's current position within the content.

How it Works

Scrollspy works by monitoring the scroll position of your webpage and updating the active state of your navigation items accordingly. It's like having a little spy (hence the name!) that watches where you are on the page and tells your navigation menu, "Hey, the user is here now!"

Let's look at a basic example:

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  <div id="navbar-example">
    <ul class="nav nav-tabs">
      <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>
  </div>

  <div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
    <h4 id="section1">Section 1</h4>
    <p>...</p>
    <h4 id="section2">Section 2</h4>
    <p>...</p>
  </div>
</body>

In this example, we're telling Bootstrap to spy on the scroll position (data-bs-spy="scroll") and update the navigation in #navbar-example. As you scroll through the content, the corresponding nav item will be highlighted.

Navbar

One of the most common uses of Scrollspy is with a navbar. Let's look at a more detailed example:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
</div>

In this example, we have a navbar with two links. As you scroll through the content, the corresponding navbar item will be highlighted. It's like having a GPS for your webpage!

Nested Nav

Sometimes, you might want to have nested navigation items. Scrollspy can handle that too! Here's how:

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
</div>

This creates a nested navigation structure that updates as you scroll through different sections and subsections. It's like having chapters and subchapters in a book, but interactive!

List Group

Scrollspy isn't limited to just navbars. You can use it with list groups too:

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
</div>

<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
</div>

This creates a list group that updates as you scroll through the content. It's like having a table of contents that knows exactly where you are in the book!

Simple Anchors

Sometimes, you might want to use simple anchor links instead of a full navbar or list group:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
</div>

This creates simple anchor links that update as you scroll. It's like having bookmarks in your webpage that light up when you reach them!

Non-visible Elements

Scrollspy can even work with elements that aren't initially visible:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

<script>
  var scrollSpy = new bootstrap.ScrollSpy(document.body, {
    target: '#navbar-example2'
  })
</script>

In this example, even if some elements are not visible initially, Scrollspy will still work with them when they come into view. It's like having a spy that can see through walls!

Usage

To use Scrollspy, you need to do three things:

Add data-bs-spy="scroll" to the element you want to spy on (usually the <body>).
Add data-bs-target="#navId" to specify the nav to use for scrollspy.
Add data-bs-offset="" to specify the pixels to offset from top when calculating position of scroll.

Here's a table of all the data attributes you can use:

Attribute	Description
data-bs-spy	Activates scrollspy
data-bs-target	Specifies which navbar to use for scrollspy
data-bs-offset	Pixels to offset from top when calculating position of scroll
data-bs-method	Finds which section the spied element is in

Options

You can also initialize Scrollspy with JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Here's a table of all the options you can use:

Option	Type	Default	Description
offset	number	10	Pixels to offset from top when calculating position of scroll
method	string	'auto'	Finds which section the spied element is in
target	string	''	Specifies which navbar to use for scrollspy

CSS Properties

Scrollspy uses a few CSS properties to work its magic:

.scrollspy-example {
  position: relative;
  height: 200px;
  margin-top: .5rem;
  overflow: auto;
}

The position: relative and overflow: auto properties are crucial for Scrollspy to work correctly.

And there you have it! You're now equipped with the knowledge to use Bootstrap's Scrollspy feature. Remember, practice makes perfect, so don't be afraid to experiment with these examples. Happy coding, and may your scrolling always be smooth!

Credits: Image by storyset