Cómo encontrar el elemento más cercano a la posición actual con jQuery

Question

Tengo un documento con varias secciones como esto:

<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> 

¿Cómo agarrar el más cercano <div.section> a la posición de desplazamiento actual (es de suponer, esto equivaldría a la sección que el lector está mirando actualmente)?

Answer 1

Puede usar $(window).scrollTop() y $(el).postion().top para determinar qué tan lejos está el elemento desde la parte superior de la pantalla después de desplazarse.

A continuación, puede utilizar esta información para manipular el elemento como desee.

Aquí es un ejemplo de trabajo jsFiddle: http://jsfiddle.net/gizmovation/x8FDU/

Answer 2

Cada vez que sobrepasa un elemento, el evento mousemove le indica el elemento sobre el que está pasando el puntero.

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

Una desventaja puede ser el hecho e.target le dará el elemento con el más alto z-index - la de la capa superior más - por lo que si usted tiene una capa por encima de su texto que le dará la superposición no el texto div.