How can I change active menu (menu navigation) automatically after scrolling?

Question

I want to make my navigation responsive, for example after scrolling I want to recognize position and change my active menu, here is my site http://paruyr.bl.ee/ it work with click but with scrolling it don't show my position. I want to change active menu automatically after scrolling. thank you

Answer 1

When window reachs a value on scroll event you need to call the same function of click event.

Here the fiddle of basic example http://jsfiddle.net/keypaul/uB4PL/23/

JQUERY (i think you need only this part)

$(window).scroll(function() {
    // when window has scrolled 60
    if ($(this).scrollTop() > 60){ 
        //call your function 
        activeMenu();
    }
    else{
        //if you need to back to init situation
        deactiveMenu();
    }

 });

If you need vanilla javascript or want to learn more about scrolling performance read this article http://www.html5rocks.com/it/tutorials/speed/scrolling/ and http://www.html5rocks.com/en/tutorials/speed/animations/

I report to you also this jquery plugin http://imakewebthings.com/jquery-waypoints/