Hervorhebung der aktuellen Abschnitt auf Scroll - Lücke zwischen den Abschnitten

Question

Ich habe eine Seite mit verschiedenen Abschnitten, die gescrollt werden können oder durch Klicken auf den entsprechenden Link in der Navigationsleiste zugegriffen werden kann. Eine Demo der Seite ist auf codepen http://codepen.io/meek/pen/NNprYb?editors=1010

ich den folgenden Code verwende, um zu verfolgen, welcher Abschnitt der Benutzer über scrollt und markieren es in der navbar

$(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 && section.position().top + section.height() > currentPos) { 
       $('.nav li').removeClass('active'); 
       sectionLink.parent().addClass('active'); 
      } 
      else { 
       sectionLink.parent().removeClass('active'); 
      } 
     }); 

    }); 

Es funktioniert gut, aber es gibt eine Lücke beim Scrollen zwischen Heimat und über Abschnitte, keiner der Links ist hervorgehoben. Ich habe das Gefühl, dass dies auf den Platz zurückzuführen ist, den die Navbar zwischen Heim und Raum einnimmt, aber ich bin nicht sicher, wie ich das überwinden soll. Im Idealfall möchte ich, dass diese Lücke auch "about" hervorhebt.

Ich habe versucht, dies zu dem obigen Code hinzuzufügen:

  else if($('#nav-wrapper').position().top <= currentPos && $('#nav-wrapper').position().top + $('#nav-wrapper').height() > currentPos) { 
       $('.nav li').removeClass('active'); 
       $('#temp').addClass('active'); 
      } 

aber es funktioniert nicht. Hilfe geschätzt

Answer 1

Lösung: Passen Sie Ihre if Anweisung in Ihrem scroll Ereignis den folgenden übereinstimmen.

if(section.position().top <= currentPos && sectionLink.offset().top + section.height() > currentPos) 

Der Schlüssel Wesen, die zweite Instanz von section.position().top Änderungen sectionLink.offset().top