Usando jQuery para encontrar el elemento visible actual y actualizar la navegación

Question

Usuario por primera vez aquí. Normalmente soy capaz de encontrar respuestas a preguntas, pero estoy teniendo dificultades para descifrar esto.

El objetivo:

tengo un solo diseño de página con una barra lateral de navegación que cuando se hace clic, se desplazará hacia abajo a un elemento de la página. Sin embargo, si el usuario simplemente se desplaza hacia abajo de la página a un elemento específico #id Quiero que el enlace correspondiente en la navegación se convierta en .active. El enlace de navegación y el elemento correspondiente comparten el mismo valor a través de element#id y a[name].

similares a:NikeBetterWorld.com

Ejemplo HTML:

<nav> 
    <a name="value">Link</a> 
</nav> 

<section id="value"> 
    content goes here 
</section> 

Obviamente, hay más secciones, enlaces, elementos, etc. Pero esta es la esencia de la misma. Entonces, cuando el usuario se desplaza hacia abajo al section#value, el a[value] habrá ganado la clase activa.

He encontrado aquí una respuesta que me ha ayudado un poco, pero todavía tengo algunos problemas. See this link for more information.

actual Javascript/jQuery:

$(document).scroll(function() { 
    var cutoff = $(window).scrollTop(); 
    var cutoffRange = cutoff + 200; 

    // Find current section and highlight nav menu 
    var curSec = $.find('.current'); 
    var curID = $(curSec).attr('id'); 
    var curNav = $.find('a[name='+curID+']'); 
    $(curNav).addClass('active'); 

    $('.section').each(function(){ 
     if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) { 
      $('.section').removeClass('current') 
      $(this).addClass('current'); 
      return false; // stops the iteration after the first one on screen 
     } 
    }); 
}); 

El problema:

Mientras que el código anterior funciona hasta cierto punto estoy funcionando en un gran problema. Tengo problemas para que un elemento completo permanezca .current. Si la parte superior del elemento sale de la ventana, perderá la clase. Lo arreglé agregando un rango para elementos nuevos, pero ahora cuando el usuario se desplaza hacia arriba el elemento anterior no ganará la clase .current hasta que la parte superior del elemento llegue a la parte superior de la ventana. Preferiría que una porción dominante de la ventana, cuando es visible, ganara la clase .current.

Cualquier ayuda, idea o sugerencia sería muy apreciada.

¡Gracias de antemano!

Answer 1

Parece que desea comprobar el borde inferior de la sección y no la parte superior. Pruebe esto y elimine el rango todos juntos:

if($(this).offset().top + $(this).height() > cutoff){ 

EDIT: Creado un violín. Creo que esto es lo que estás describiendo.

http://jsfiddle.net/pdzTW/

Answer 2

yeeeahhh! ¡tengo la solución!

acabo de cambiar a partir de:

if ($(window).scrollTop() >= $(section).offset().top) { 

a

if ($(window).scrollTop() + 80 >= $(section).offset().top) { 

Answer 3

siempre uso jQuerys función de "filtro" para devolver la sección actual.

$currSection = $('section').filter(function() { 
    var $this = $(this); 
    var offset = $this.offset().top; 
    var view = winHeight/2; 

    return scrollTop >= offset - view && offset + ($this.outerHeight() - view) >= scrollTop; 
}); 

envolverlo en un oyente de desplazamiento como:

$(window).on('scroll', function() { 
    // here we go ... 
}); 

Eso es todo.