menu question (RE: scrolling hover)

[John444]

Hello everybody, I am trying to make a website that is entirely on one page. I would like it to, as you scroll down, change the colour of the corresponding menu button to that section of the website.

For example say the person scrolls down to the contact section, as soon as that contact section is reached, I want the contact button to turn blue. Like wise as they scroll back up to the home page section, for the home button to turn blue. However as they leave one section, it turns back to normal.

Any idea how I would do this?

 

[designguy79]

Check out jQuery Waypoints plugin:

http://imakewebthings.com/jquery-waypoints/

Have fun!

~ Jeremy

 

[John444]

Check out jQuery Waypoints plugin:

http://imakewebthings.com/jquery-waypoints/

Have fun!

~ Jeremy

Thanks, this seems to be what I was looking for. Any idea how to get it change the css background of say a div named 'button' ?

 

[designguy79]

Untested... adds a CSS class named "scrolled" to button with ID of "buttonID" when you get to anchor with ID "anchorID". Explore the Waypoints examples and documents for further info.

$('#anchorID').waypoint(function() {
   $('#buttonID').addClass('scrolled');
});

Hope that helps!