如果当前存在，如何更改内部链接的样式

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

使用javascript跟踪每个部分的滚动顶部位置，如果用户输入该部分，请使用javascript查找与其关联的链接，并根据需要添加一个类，同时从上一个链接中删除该类。

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.