überspringen aktive Klasse für bestimmte Elemente, wenn

Question

Scrollen

Ich habe folgendes Problem:

ich einige Logik implementieren wollte die aktive Klasse auf Listenelemente in meiner Navigationsleiste zu setzen, während Scrollen. Ich verwenden, um diesen Schnipsel:

$(window).bind('scroll', function() { 
    var scrollPos = $(window).scrollTop() + 100; 
    $('#nav-menu a').each(function() { 
    var currLink = $(this); 
    var refElement = $(currLink.attr("href")); 
    currLink = currLink.parent(); 
    if (refElement.position().top <= scrollPos) { //&& refElement.position().top + refElement.height() > scrollPos 
     $('.nav > li').removeClass("active"); 
     currLink.addClass("active"); 
    } else { 
     currLink.removeClass("active"); 
    } 
    }); 
}); 

Es funktioniert gut, wenn ich scrollen und damit auch, wenn ich in der Navigationsleiste auf einen Link klicken. Angenommen, ich habe 5 Links, die sich auf 5 verschiedene Divs beziehen. Nehmen wir an, ich bin momentan an der Position des ersten Div.
Nun klicke ich auf den letzten Link und es scrollt durch die Divs. Aber jetzt erhält jede Verbindung dazwischen die aktive Klasse, während ich scrolle.

Können Sie eine Abhilfe vorschlagen, um die Links dazwischen zu überspringen?

EDIT: Dies ist der Click-to-Scroll-Codeteil:

// Page scroll 
$('a.page-scroll').click(function() { 
    $(".nav > li").removeClass("active"); 
    // $(this).parent().addClass("active"); 
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && 
     location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
    if (target.length) { 
     $('html,body').animate({ 
     scrollTop: target.offset().top - 40 
     }, 900); 
     return false; 
    } 
    } 
}); 

Answer 1

Geändert Code pro meinem Kommentar auf obige Frage. Lassen Sie mich wissen, ob das funktioniert. Ich habe meine Änderungen kommentiert, so dass Sie CMD/CTRL + F für --CapitalQ.

$(window).bind('scroll', function() { 
    var scrollPos = $(window).scrollTop() + 100; 
    $('#nav-menu a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     currLink = currLink.parent(); 
     if (refElement.position().top <= scrollPos) { 
      $('.nav > li').removeClass("active"); 

      // added a check here to only add "active" if body not scrolling --CapitalQ 
      if (!$('body').hasClass('scrolling')) { 
       currLink.addClass("active"); 
      } 
     } 
     else { 
      currLink.removeClass("active"); 
     } 
    }); 
}); 

$('a.page-scroll').click(function() { 

    // Add scrolling class to body --CapitalQ 
    $('body').addClass('scrolling'); 

    $(".nav > li").removeClass("active"); 
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
     if (target.length) { 
      $('html,body').animate({ 
       scrollTop: target.offset().top - 40 
      }, 900, function() { 

       // added callback to jQ animate function --CapitalQ 
       $('body').removeClass('scrolling'); 
       $(this).parent().addClass('active'); 
      }); 

      return false; 
     } 
    } 
});