javascript - Change navigation active class on window scroll

Question

i want to create a scroll effect like here http://www.strikingly.com/s/pages/default-ion?demo=ion#1 All i need for this moment is to change navigation li class active when the window is scrolling , just change the it using <a href='#about'> hash target

http://jsfiddle.net/Dxtyu/131/

Answer 1

DEMO

Serlite's code is very good but had some bugs.

1. If you scroll down to the end last two a elements have active class so both are highlighted.

Solution

added $('#menu-center ul li a').removeClass("active"); to remove all previous active class before adding new class in the below code.

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active"); //added to remove active class from all a elements
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

2. If you click on 2nd or greater menu link it makes you scroll to the location but changes active class to previous link.

Solution

$('html, body').stop().animate({
            'scrollTop': $target.offset().top+2