Scrollspy

Scrollspy provides a way for a nav or a list group to keep track of how a separate element is scrolling.

Scrollspy Data

• nav

  • data-bs-spy="scroll"
  • data-bs-spy="ID"
  • data-bs-offset="AMT"

• position-relative

Nav Scrollspy Navbar

In terms of implementation, it's pretty simple. There are two parts. The element you want to spy and the element that you want to modify.

On the element you want to spy, you add a data-bs-spy="scroll" as wel as data-bs-spy="ID" with the ID of the element you want to track.

The element you want to spy is usually the body tag since you often want to track how someone is scrolling through a document, but it doesn't have to be the body, it can be any element on the page.

Another caveat is that the element you want to track needs to have a position relative attribute somehow. Otherwise, the tracking won't work properly.

Sometimes if menu are positioned a certain way, you'll need an extra property called data-bs-offset with the height of the menu.

To make this all work you'll need IDs around each of the content in the target that you want to trigger the change. In the navigation, you add an href partial with a hastag pointing to that link.