How to change style of internal link if currently there

Question

I'm trying to create a navigation menu for what I expect to be an extremely long page. I'm using internal links to make it easy to get from one section or another, but the page is designed for users to scroll up and down the page quite a bit in one session. I found that internal links aren't enough to orient the user with their location on the page, so I've added smooth scrolling when an internal link is clicked. This has helped some, but I would love to change the style of the internal link if you're currently next to it.

As an example we have five links below. The user starts out at the section that corresponds with link A, so it's bold faced. When they scroll down a bit further they get to the section that corresponds with link B, so it is now bold faced. If they jump down to the section that corresponds with link E it becomes bold faced, and the same if they jump 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 could probably use "hover" event, assuming the user's pointer will get over the div where is your content linked whith A, B, C, ...

But it wouldn't work in all cases... you could also count how much the user has scrolled down, and then determine where he is in the page.

That's not an easy matter.

Answer 2

Use javascript to track the scroll top 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 that which styles it as you want, while removing the class from the previous link.

Answer 3

One way would be is to use javascript to find all the internal links then get the 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 tell if the page has been scrolled. If not then poll every couple of seconds to see what it's position is and then compare to the offsetTop. There may be better solutions then this however.