The script you posted above gives you a general idea of how to do this. You’ll add a scroll event handler, and in that handler you’ll figure out which section is currently showing and then you can add/remove a “highlight” class to the nav bar items depending on which section is showing. You’ll want to come up with some way to associate each section to its nav bar item so you can do the highlighting.
The hardest part is determining which section is currently showing (that logic is in the
isWithinLimits() function). I will warn you that the current logic in there is probably not what you want, so you will need to figure it out on your own. Also, I would not set those
consts at the beginning like that because the user can change the height of the browser (in other words, you’ll want to recalculate them each time your logic checks to see which item is in view, or you could listen to the resize event and recalculate every time the height changes).
You can get the current height of the view port, the current position of the scroll bar and the current position of each section using JS. I think that should be all you need to implement the logic.