Highlight-Menü beim Scrollen (wenn div erreichen)

Question

ich möchte markieren Sie den Menüpunkt, wenn das div ist gescrollt // oder geklickt.

http://jsfiddle.net/WeboGraph/vu6hN/2/ (das ist ein Beispiel, was ich will)

mein Code: (JS)

$(document).ready(function(){ 
     $('nav a').on('click', function(event) { 
      $(this).parent().find('a').removeClass('active_underlined'); 
      $(this).addClass('active_underlined'); 
     }); 

     $(window).on('scroll', function() { 
      $('.target').each(function() { 
       if($(window).scrollTop() >= $(this).position().top) { 
        var id = $(this).attr('id'); 
        $('nav a').removeClass('active_underlined'); 
        $('nav a[href=#'+ id +']').addClass('active_underlined'); 
       } 
      }); 
     }); 
    }); 

meine (html nav)

 <nav> 
      <div id="cssmenu"> 
       <ul id="horizontalmenu" class="underlinemenu"> 
        <li><a data-scroll href="#fdesigns" class="active_underlined">FDesigns</a> </li> 
        <li><a data-scroll href="#skills">skills</a> </li> 
        <li><a data-scroll href="#workflow">WORKFLOW</a> </li> 
        <li><a data-scroll href="#portfolio">Portfolio</a> </li> 
        <li><a data-scroll href="#about">About</a> </li> 
        <li><a data-scroll href="#kontakt">Kontakt</a> </li> 
       </ul> 
      </div> 
     </nav> 

meine (css)

.active_underlined a { 
    color: #fff; 
    border-bottom: 2px solid #ebebeb; 
} 

a.active_underlined { 
    color: #fff; 
    border-bottom: 2px solid #ebebeb; 
} 

hier eine Verbindung zu dem Projekt: http://www.f-designs.de/test_onesite

Answer 1

Verwenden $(this).offset().top anstelle von $(this).position().top

Fiddle

Als .position() in dem Satz von passenden Elementen, die die aktuellen Koordinaten des ersten Elements erhalten, bezogen auf die Offsetmutter während .offset() Ruft die aktuellen Koordinaten des ersten Elements in der Menge der übereinstimmenden Elemente relativ zum Dokument ab.

In Ihrer Webseite alle DIV mit Klasse in .target sind im Inneren deshalb alle das Element der Klasse .target kehren den Wert .position().top gleich 0

den Offset-Wert verringern, so dass die class ändern, wenn Element das Menü erreichen indem man die if Bedingung wie folgt macht:

if($(window).scrollTop() >= $(this).offset().top - $("#cssmenu").height())