jQuery przewijania, zmiana nawigacji aktywny klasy jako strona przewija, w stosunku do odcinków

Question

http://jsfiddle.net/motocomdigital/gUWdJ/

Jestem po technice jQuery przewijania proszę, że chciałbym, aby dostosować się do mojego projektu.

Proszę zobaczyć mój przykładowy projekt jak ryba tutaj http://jsfiddle.net/motocomdigital/gUWdJ/

Obecnie widać, że moje linki nav automatycznie animuje przewijania względem <section> wieku.

Moje pytanie brzmi, używając metody $(window).scroll, w jaki sposób mogę dodać klasę .active do mojego nav a, gdy sekcje dojdą do górnej części okna?

Tak na przykład, jeśli użytkownik przewija w dół strony (zamiast linków nawigacyjnych), chcę aktywny klasy należy dodać względny odnośnik nawigacji. Wskazując, gdzie jesteś na stronie.

Aktywna klasa będzie musiała zostać usunięta, a następnie dodana za każdym razem, gdy zgaduję, że użytkownik przewija stronę.

też trzeba będzie uwzględnić wysokość 28px stacjonarnej pasku nawigacyjnym przesunięcie górnego okna.

Czy ktoś proszę mi pokazać techniki, że mogę spróbować skorzystać lub dostosowywania, czy może pokazać mi przy moim jsfiddle :)

Każda pomoc będzie bardzo mile widziany, z góry dziękuję!

http://jsfiddle.net/motocomdigital/gUWdJ/

Answer 1

Jeśli życzyć bardziej ogólną funkcję:

SEE DEMO

$(window).scroll(function() { 
    var windscroll = $(window).scrollTop(); 
    if (windscroll >= 100) { 
     $('nav').addClass('fixed'); 
     $('.wrapper section').each(function(i) { 
      if ($(this).position().top <= windscroll - 100) { 
       $('nav a.active').removeClass('active'); 
       $('nav a').eq(i).addClass('active'); 
      } 
     }); 

    } else { 

     $('nav').removeClass('fixed'); 
     $('nav a.active').removeClass('active'); 
     $('nav a:first').addClass('active'); 
    } 

}).scroll();​ 

Answer 2

Można to zrobić w ten sposób: http://jsfiddle.net/gUWdJ/1/

$(window).scroll(function() { 

    if ($(this).scrollTop() < $('section[data-anchor="top"]').offset().top) { 
     $('nav a').removeClass('active'); 
    } 

    if ($(this).scrollTop() >= $('section[data-anchor="top"]').offset().top) { 
     $('nav a').removeClass('active'); 
     $('nav a:eq(0)').addClass('active'); 
    } 
    if ($(this).scrollTop() >= $('section[data-anchor="news"]').offset().top) { 
     $('nav a').removeClass('active'); 
     $('nav a:eq(1)').addClass('active'); 
    } 
    if ($(this).scrollTop() >= $('section[data-anchor="products"]').offset().top) { 
     $('nav a').removeClass('active'); 
     $('nav a:eq(2)').addClass('active'); 
    } 
    if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) { 
     $('nav a').removeClass('active'); 
     $('nav a:eq(3)').addClass('active'); 
    } 

}); 

Answer 3

poszedł do przodu i modyfikowane mój skrypt off A. Wilka, bo potrzebne, aby upewnić się, że moje pozycje menu oświetlone z ujemną różnicą górnej zamiast na 0. To działa dużo lepiej niż tworzenie oddzielnej funkcji i pozwala uniknąć konieczności tworzenia zdarzenia click dla każdej pozycji menu. Chciałbym również zmodyfikować ten skrypt, aby wykazać ostatniej pozycji w menu, to powinny być automatycznie zaznaczony jeśli drugi do ostatniego elementu jest. Przypuszczam, że kopalnia jest bardzo podobne, ale różnią się jak obchodzić moje każdej pętli poza moją główną funkcją podświetlenia.Drugą wielką zaletą mojej modyfikacji jest to, że zawiera ona obrazy wewnątrz linku wewnątrz pozycji menu i uwzględnia wysokość elementu, a kiedy dno tego elementu trafia na górę strony, czyli kiedy podświetlenie powinno Koniec przed nowym.

function highlight(item) 
{ 
var itemTop = jQuery(item).position().top; 

var windowTop = jQuery(window).scrollTop(); 
var topDifference = (windowTop - itemTop); 

var itemHeight = jQuery(item).height(); 
var bottomDifference = topDifference - itemHeight; 

var menuId = jQuery('#nav-icons li a').attr('href'); 
if (menuId = item) 
{ 
    if(topDifference > -1 && bottomDifference < 0) 
    { 
     jQuery("#nav-icons li a[href='" + item + "']").parent().addClass('active'); 
     jQuery("#nav-icons li a[href!='" + item + "']").parent().removeClass('active'); 
    } 
    else { 
     jQuery("#nav-icons li a[href='" + item + "']").parent().removeClass('active'); 
    } 
} 
} 
jQuery('#nav-icons li a').each(function(){ 
var eachAttr = jQuery(this).attr('href'); 
highlight(eachAttr); 
});