How to automatically select anchor when scrolling

Question

I will try to explain as clearly as I can.

I have a sidebar with, for example, 3 items. Each item is a link to an anchor in the page. I use the scrollTo function to have a smooth scrolling when I click on an item. It works great.

But what I want now is that when I scroll, to go for example to the anchor 3, the current anchor which is shown while scrolling will be selected automatically. Clear ?

For example : the item 1 is selected. I start scrolling and i arrive to the anchor 2. Automatically, the item 2 is selected and the item 1 is going to a not selected state.

I continue scrolling and I arrive the anchor 3. The item 2 is going to the not selected state and the item 3 is automatically selected.

So the items states automacally change by scrolling and not only y clicking on the item.

Is there a smart way to do that ?

Thanks by advance.

Bastien

Answer 1

Twitter bootstrap has an implementation: http://twitter.github.com/bootstrap/javascript.html#scrollspy

Also, jQuery waypoints provides sufficient functionality: http://imakewebthings.com/jquery-waypoints/

Answer 2

check out this plugin: http://remysharp.com/2009/01/26/element-in-view-event-plugin/