I'm currently working on a navigation menu for a lengthy web page. To aid users in navigating easily through the sections, I have implemented internal links. However, due to the vertical nature of the page and the need for frequent scrolling, I found that just using internal links was not enough to give users a sense of their location on the page. As a solution, I have added smooth scrolling functionality when an internal link is clicked. While this has improved the user experience, I am looking to enhance it further by changing the style of the internal link based on the user's current position on the page.
Take for example the five links provided below. Initially, the user begins at the section corresponding to Link A, which is highlighted in bold. As they scroll down to the section linked with Link B, it becomes bold-faced. Similarly, if they navigate to the section associated with Links C or E, those links also change to bold face accordingly.
~
Step 1...............Step 2...............Step 3...............Step 4
Link A...............Link A...............Link A...............Link A
Link B...............Link B...............Link B...............Link B
Link C...............Link C...............Link C...............Link C
Link D...............Link D...............Link D...............Link D
Link E...............Link E...............Link E...............Link E
~
Is there a way to implement this custom styling feature?