Add class "active" to menu item when on section of page

[jayg-7]

Hello, I’m trying to add the class active to menu items on the page when the browser window is over a certain section of that page.

The site is here:

http://osof.studioissa.com/

The JS that isn’t working yet is below. Thank you!

”’

(function AddActiveClassToMenu($){

var $menu = $('.nav-primary');
var $menuLi = $menu.find('li');

$menu.find('a').click(function(e){

    var $this = $(this);

    $menuLi.removeClass('active');
    $this.parent().addClass('active');

    // Fix first link and make it scroll to top
    if ($this.parent().index() === 0) {
        e.preventDefault();
        $("html, body").animate({ scrollTop: 0 }, "slow");
    }
});

var selectorStrings = ['#front-page-1','#front-page-2','#front-page-3','#front-page-4','#front-page-5','#front-page-6'];

function activeWhenInView(iterator) {
    $(selectorStrings[iterator]).waypoint(function(){
        $menuLi
            .removeClass('active')
            .eq(iterator).addClass('active');
        }
    );
}

for (var i = 0; i < selectorStrings.length; i++) {
    activeWhenInView(i);
}

})(jQuery);
”’

[Paulie_D]

https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#q=javascript%20is%20visible%20on%20screen&es_th=1

[Author]

Posts