Jquery/Javascript encontrar primer elemento visible después de desplazamiento

Question

Tengo un código como a continuación:

<div id="container"> 
<div class="item" id="1">blah blah</div> 
<div class="item" id="2">blah blah 2</div> 
</div> 

Pero en realidad hay mucha, mucha de la clase 'elemento' =.

Básicamente, a medida que el usuario se desplaza por esta gran lista larga de elementos, quiero cambiar el estilo de la visible superior actual (¡como Google Reader!). He buscado soluciones en jquery o Javascript simple, pero parece que no puedo encontrar ninguna. ¿Alguien tiene alguna idea?

Gracias

Marcos

Answer 1

Si sus elementos no son de la misma altura, se puede iterar sobre ellos en el desplazamiento:

$(document).scroll(function() { 
    var cutoff = $(window).scrollTop(); 
    $('.item').removeClass('top').each(function() { 
     if ($(this).offset().top > cutoff) { 
      $(this).addClass('top'); 
      return false; // stops the iteration after the first one on screen 
     } 
    }); 
}); 

Si esto es demasiado lenta, se puede almacenar en caché el $ ('artículo.') De desplazamiento(). en una matriz, en lugar de llamar a offset() cada vez.

Answer 2

Usted puede crear su propio desplazador usando javascript.

No es una idea muy práctica pero puedes intentarlo.

Y coloque el enlace a la imagen describiéndolo mejor. Sería muy útil.

Answer 3

Aquí hay una idea más, basada en las funciones incorporadas de javascipt.

var range = document.caretRangeFromPoint(0,0); // screen coordinates of upper-left corner of a scolled area (in this case screen itself) 
var element = range.startContainer.parentNode; // this an upper onscreen element 

Este bit de código no es un producto listo para usar - es sólo un ejemplo, que sólo funciona en los navegadores WebKit. Si desea utilizarlo, debe buscar en google equivalentes de explorador cruzado de caretRangeFromPoint()