The Bootstrap 4 scrollspy is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate the visitor where they are currently on the page.
How to create Scrollspy:-
- use nav component or list group.
- Scrollspy requires position: relative; inside style section.
- Add data-spy=”scroll” to the element that should be used as the scrollable area(inside body tag).
- Add data-target with value id|class (.navbar). this is important to make sure that the navbar is connected with the scrollable area.
- inside <div id=”name” > matches link with the nav item <a href=”#name”>.
- Add data-offset =”30″ specifies the number of pixels to offset from top when calculating the position of scroll.
![](https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/scrollspy-1024x575.png)
![](https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/part2-1024x575.png)