Aktuellen Abschnitt in Navbar hervorheben

Question

Ich habe eine Scroll-Seite mit einer Navbar und ich möchte, dass der Abschnitt, durch den der Benutzer scrollt, in der Navigationsleiste hervorgehoben wird. Im Moment erreicht es das fast, hebt aber die falsche Verbindung hervor.

Eine Demonstration ist bei http://codepen.io/meek/pen/NNprYb?editors=1000

Der Code, der dies tut, ist wie folgt:

// highlight current tab 
    $(window).on("scroll", function() { 

     var currentPos = $(window).scrollTop(); 

     $('.nav li a').each(function() { 
      var sectionLink = $(this); 
      var section = $(sectionLink.attr('href')); 
      if(section.position().top <= currentPos && sectionLink.offset().top + section.height() >= currentPos) { 
       $('.nav li').removeClass('active'); 
       sectionLink.parent().addClass('active'); 
      } 
      else { 
       sectionLink.parent().removeClass('active'); 
      } 
     }); 

    }); 

Ich habe einige Dinge ausprobiert, aber kann sie nicht zuverlässig die aktive Klasse der hinzufügen richtige Sitzung. Hilfe geschätzt!

edit: um klarer zu sein, das Problem ist, dass es nur den Abschnitt hervorhebt, wenn Sie ein wenig hineingescrollt haben, anstatt ganz oben, was bedeutet, dass, wenn Sie auf einen Abschnitt klicken, um nach oben zu scrollen Abschnitt automatisch, dieser Abschnitt ist nicht markiert.

edit2: Also Änderung der if-Anweisung zu:

if(currentPos + $('#nav-wrapper').outerHeight() >= section.position().top && currentPos + $('#nav-wrapper').outerHeight() <= sectionLink.offset().top + section.outerHeight()) { 

eine Verbesserung gemacht hat, obwohl nicht vollständig das Problem behoben. Die Home-, About- und Portfolio-Sections markieren alle den richtigen Link, aber keinen Kontakt.

Answer 1

Sie müssen die Höhe der Navigationsleiste berücksichtigen und sie vom oberen Teil des Abschnitts abziehen, der hervorgehoben werden soll.

Die Höhe ist derzeit in Ihrem CSS bei 75px fest codiert, aber ich habe einen jQuery-Selektor für die Höhe eingefügt, falls er für kleinere Bildschirme geändert/verschwinden muss.

Schöne Arbeit übrigens.

$(window).on("scroll", function() { 
    var currentPos = $(window).scrollTop(); 

    $('.nav li a').each(function() { 
    var sectionLink = $(this); 
    // capture the height of the navbar 
    var navHeight = $('#nav-wrapper').outerHeight() + 1; 
    var section = $(sectionLink.attr('href')); 

    // subtract the navbar height from the top of the section 
    if(section.position().top - navHeight <= currentPos && sectionLink.offset().top + section.height()> currentPos) { 
     $('.nav li').removeClass('active'); 
     sectionLink.parent().addClass('active'); 
    } else { 
     sectionLink.parent().removeClass('active'); 
    } 
    });   
});