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

Answer 1

I know I am late, but my answer may help the new viewers of this thread. Tushar Gupta's answer is correct. But if there a link in menu that is redirecting to any other page. Tushar Gupta's Answer will throw an error. For Example

    

    

        

            
Home
            
            
Portfolio
            
            
About
            
            
Blog
            
            
Contact
            
        
    
   
   

   

   

   

This will throw an error in console like this. And scrolling will not work for Contact. I Updated Tushar's code to fix that issue.

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a[href*=#]:not([href=#])').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");
    }
});
}