How to use Scrollspy in Bootstrap 5 via JavaScript ?

In this article, we will see how to use Scrollspy in Bootstrap 5 via Javascript.

Using Scrollspy in Bootstrap 5, the navigation or list group components of Bootstrap update automatically based on where the user is scrolling to indicate which link is currently active in the viewport.

There are 2 ways to use Scrollspy in Bootstrap 5:

• Via data attributes: Bootstrap 5 Scrollspy Via data attributes
• Via JavaScript, which we will discuss in this article. 

Syntax:

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

Here, "example" can be the id or class of any component on which you want to apply scroll spy.

Example 1: The below code example demonstrates how we can implement Scrollspy on a Navbar.

Output:

Example 2: The below code example demonstrates how we can implement scrollspy on a Nested Navbar.

Output:

Reference: https://getbootstrap.com/docs/5.3/components/scrollspy/#via-javascript