menu question (RE: scrolling hover)

Discussion in 'Web Design and Development' started by John444, Jun 26, 2012.

  1. John444 macrumors member

    Joined:
    Feb 10, 2011
    #1
    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?
     
  2. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
  3. John444 thread starter macrumors member

    Joined:
    Feb 10, 2011
    #3
    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' ?
     
  4. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #4
    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.

    Code:
    $('#anchorID').waypoint(function() {
       $('#buttonID').addClass('scrolled');
    });
    Hope that helps!
     

Share This Page