Jquery/Javascript trovare primo elemento visibile dopo scorrimento

Question

Ho codice come di seguito:

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

Ma in realtà ci sono un sacco di con class = 'voce'.

Fondamentalmente come l'utente scorre questo lungo elenco di elementi che voglio cambiare lo stile di quello visibile in alto corrente (come google reader!). Ho guardato in giro per la soluzione in jQuery o javascript semplice, ma non riesco a trovarne uno. Qualcuno ha qualche idea?

Grazie

Mark

Answer 1

Se i tuoi elementi non sono la stessa altezza, è possibile eseguire iterazioni su di loro sul rotolo:

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

Se questo è troppo lento, è possibile memorizzare nella cache il $ ('oggetto.') Offset(). in una matrice, piuttosto che chiamare offset() ogni volta.

Answer 2

È possibile creare il proprio scroller utilizzando JavaScript.

Non è un'idea molto pratica, ma puoi provare.

E posizionare il collegamento all'immagine che lo descrive meglio. Sarebbe molto usabile.

Answer 3

Ecco un'altra idea, basata sulle funzioni di javascipt incorporate.

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 

Questo bit di codice non è un prodotto pronto per l'uso - è solo un esempio, che funziona solo in browser WebKit. Se si desidera utilizzarlo, è necessario google per gli equivalenti cross-browser di caretRangeFromPoint()