Come trovare l'elemento più vicino alla posizione corrente con jQuery

Question

Ho un documento con più sezioni in questo modo:

<div class='section' id='sec1'> 
    lalala 
    lalala 
    lalala 
</div> 

<div class='section' id='sec2'> 
    lalala 
    lalala 
    lalala 
</div> 

<div class='section' id='sec3'> 
    lalala 
    lalala 
    lalala 
</div> 

<div class='section' id='sec4'> 
    lalala 
    lalala 
    lalala 
</div> 

Come posso afferro il più vicino <div.section> alla posizione di scorrimento corrente (presumibilmente, ciò equivarrebbe alla sezione che il lettore sta attualmente esaminando)?

Answer 1

È possibile utilizzare $(window).scrollTop() e $(el).postion().top per capire fino a che punto l'elemento si trova dalla parte superiore dello schermo dopo lo scorrimento.

È quindi possibile utilizzare queste informazioni per manipolare l'elemento come desiderato.

Ecco un esempio jsfiddle lavoro: http://jsfiddle.net/gizmovation/x8FDU/

Answer 2

Ogni volta che si passa il mouse su un elemento, l'evento mousemove indica l'elemento su cui si passa il mouse.

$(document).bind('mousemove', function(e) { 
    e.target 
    /* 
     the target in click/hover events 
     is the element that the event was 
     triggered on. 
    */ 
}); 

Uno svantaggio può essere il fatto e.target vi darà l'elemento con il più alto z-index - quello nello strato più in alto - quindi se avete un overlay sopra il testo che vi darà la sovrapposizione non il testo div.