jquery scroll, il cambiamento di navigazione di classe attiva come pagina scorre, relativamente alle sezioni

Question

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

che sto cercando una tecnica jquery scorrimento pare che vorrei per adattarsi al mio progetto.

Si prega di vedere il mio progetto di esempio come un violino qui http://jsfiddle.net/motocomdigital/gUWdJ/

Attualmente si può vedere che i miei link nav anima i automaticamente lo scorrimento relativo ai 's <section>.

La mia domanda è, secondo il metodo $(window).scroll, come posso aggiungere una classe .active al mio nav a quando le sezioni raggiungono la parte superiore della finestra?

Quindi, ad esempio, se l'utente scorre verso il basso della pagina (anziché i collegamenti di navigazione), desidero aggiungere alla classe attiva il relativo link di navigazione. Indicare dove ti trovi sulla pagina.

La classe attiva dovrà essere rimossa e quindi aggiunta ogni volta che indovino mentre l'utente scorre la pagina verso il basso.

Inoltre, sarà necessario tenere conto dell'altezza di 28 px della barra di navigazione fissa, offset della finestra superiore.

Qualcuno può per favore mi mostrano una tecnica che posso provare e utilizzare o adattare, o forse mi mostri usando il mio jsfiddle :)

Qualsiasi aiuto sarebbe molto apprezzato, Grazie in anticipo!

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

Answer 1

Se desiderare una funzione più generica:

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

Si può fare in questo modo: 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

Sono andato avanti e modificato il mio script off di A. Lupo perché avevo bisogno di fare in modo che le mie voci di menu illuminati con una differenza superiore negativo invece che a 0. Funziona molto meglio rispetto alla creazione di una funzione separata ed evita di dover creare un evento click per ciascuna voce di menu. Vorrei anche modificare questo script per tenere conto dell'ultima voce nel menu, dovrebbe essere automaticamente evidenziato se il penultimo elemento è. Suppongo che la mia sia molto simile ma diversa dal momento che ho gestito ogni mio loop al di fuori della mia funzione principale di evidenziazione.L'altra cosa grandiosa della mia modifica è che tiene conto di avere immagini all'interno di un link all'interno di una voce di menu e tiene conto dell'altezza di un elemento e quando la parte inferiore di quell'elemento colpisce la parte superiore della pagina, che è quando l'evidenziazione deve fine prima che ne faccia uno nuovo.

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); 
});