How to change the style of an internal link, if currently

Question

I am trying to create a navigation menu for what I expect to be an extremely long page. I use internal links to make it easier to navigate from one section or another, but the page is designed to allow users to scroll up and down the page several times in one session. I found that internal links are not enough to orient the user with their location on the page, so I added smooth scrolling when I click on the internal link. This has helped some, but I would like to change the style of the internal link if you are right next to it.

As an example, we have five links below. The user is launched in the section that corresponds to link A, so he is bold. When they scroll a little further, they fall into the section that corresponds to link B, so now it's bold. If they jump into the section that corresponds to link E, it will become bold, and the same if they go to link C.

~

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 any way to achieve this?

Answer 1

You can probably use the "hover" event, assuming the user pointer goes through the div where your content is related to A, B, C, ...

But that would not work in all cases ... you could also calculate how much the user has scrolled, and then determine where he is on the page.

This is not an easy task.

Answer 2

Use javascript to track the top scroll position of each section, and if the user enters the section, use javascript to find the link associated with it, and add a class to style it the way you want, removing the class from the previous link.

Answer 3

One way is to use javascript to find all internal links, then get offsetTop . This returns the number of pixels from the top of the page to the element. Then I'm not sure if there is a reliable way to find out if the page has been scrolled. If not, then poll every couple of seconds to see what kind of position it is, and then compare with offsetTop. Then there may be better solutions.