Adding Scrollspy to the Portfolio Website

Let’s add scrollspy to the navbar of the portfolio website.

We'll cover the following

Now that we've built our basic navbar design, let's add scrollspy. Scrollspy allows us to update the navbar links based on scroll position to indicate which link is currently active in the viewport.

Body

Since we want scrollspy to be available throughout the website, we will add attributes data-bs-spy="scroll" and data-bs-target="#navbarID" to the <body> tag on line 16. The #navbarID is the id of the navbar, as we want to target scrollspy on navbar list items. Let's see it in action.

Get hands-on with 1400+ tech skills courses.