jquery scroll, cambie la clase de navegación activa a medida que la página se desplaza, en relación con las secciones

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

Estoy buscando una técnica de desplazamiento jquery por favor, me gustaría adaptarme a mi proyecto.

Por favor vea mi ejemplo de proyecto como un violín aquí http://jsfiddle.net/motocomdigital/gUWdJ/

Actualmente puedes ver que mis enlaces de navegación animan automáticamente el desplazamiento relativo a la

.

Mi pregunta es, usando el método $(window).scroll , ¿cómo puedo agregar una clase .active a mi nav a cuando las secciones alcanzan la parte superior de la ventana?

Entonces, por ejemplo, si el usuario se desplaza por la página (en lugar de los enlaces de navegación), quiero que se agregue la clase activa relativa al enlace de navegación. Indicando dónde se encuentra en la página.

La clase activa tendrá que ser eliminada y luego agregada cada vez que adivine a medida que el usuario se desplaza por la página.

También tendrá que dar cuenta de la altura de 28 píxeles de la barra de navegación fija, la ventana superior de desplazamiento.

¿Puede alguien por favor mostrarme una técnica que puedo probar y usar o adaptar, o tal vez mostrarme usando mi jsfiddle 🙂

Cualquier ayuda sería muy apreciada, ¡gracias de antemano!

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

enter image description here

    Si desea una función más genérica:

    VER 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();​ 

    Puedes hacerlo de esta manera: 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'); } }); 

    Seguí adelante y modifiqué mi script de A. Wolf porque necesitaba asegurarme de que mis elementos de menú se iluminaban con una diferencia superior negativa en lugar de 0. Esto funciona mucho mejor que crear una función separada y evita tener que crear un script. haga clic en evento para cada elemento del menú. También modificaría este script para tener en cuenta el último elemento del menú, debería resaltarse automáticamente si el penúltimo elemento es. Supongo que el mío es muy similar, pero diferente, ya que manejé cada uno de mis bucles fuera de mi función de resaltado principal. La otra gran cosa acerca de mi modificación es que da cuenta de tener imágenes dentro de un enlace dentro de un elemento de menú y cuentas para la altura de un elemento y cuando la parte inferior de ese elemento llega a la parte superior de la página, que es cuando debe resaltarse terminar antes que uno nuevo.

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