Bootstrap 4 Scrollspy

The Bootstrap Scrollspy component allows you to automatically update nav targets based on scroll position.

Scrollspy allows you to highlight the current position in a menu, based on the user's scroll position. As the user scrolls down the page, the applicable menu item is highlighted, based one where the scroll position is.

Scrollspy Example

Here's an example of Scrollspy in action. Scroll down the page/frame and see each menu item highlighted as you reach the corresponding position in the page:

Scrollspy requires Relative Positioning

Scrollspy requires the use of position: relative; on the element being spied on.

This is most commonly the <body> element, so you can apply it to that element. However, when spying on other elements, you'll need to have a height set and overflow-y: scroll; applied.