Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #194198
    jayg-7
    Participant

    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);
    ”’

    #194227
    Paulie_D
    Moderator
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.