To update our navigation accordingly and move the .active class from one item to the next based on their associated target, I have used the Bootstrap 4 Scrollspy. More information below:
I followed following steps in doing so:
Gave an id of say navbar-id to the parent of the div containing our navigation.
Applied some attributes on body tag like:
data-spy=“scroll” data-target="#navbar-id" data-offset="50"
Here the data-target should match with the id set in step 1.
Set the position relative on body (css).
Set the class of nav-link on the anchors of the navigation.