Highlight anchor on scroll technique - How do I do this?

JavaScript
1

I want to do something like this - http://kiskolabs.com/#blog

Menu items highlight when scrolled to different positions. Can anyone point me in the direction of tutorials. Also, is there a name for this type of technique?

2

I haven’t come across that before but it would be relatively easy to do assuming that each section is in a div with a different id (which it would need to have as the destination for the menu anyway).

Simply attach a mouseover to each of the divs that applys the appropriate style to the menu entry and a mouseout that restyles it back.

As a simple example using inline event handlers you would have something along the lines of:


<li id="menuservice"><a href="#service">Service</a></li>

<div id="service" onmouseover="document.getElementById('menuservice').style.backgroundColor = '#00c';" 
onmouseout="document.getElementById('menuservice').style.backgroundColor = '#ccc';">
content
</div>

If I were adding this to a real web page I’d use unobtrusive event listeners and make use of the id on the div to attache them.

3

rpeg, I’ve seen something like this implemented using a jQuery plugin called “Waypoints” - if you don’t mind using jQuery on your site, it might be worth taking a look at their demo page: http://imakewebthings.com/jquery-waypoints/

4