Как найти ближайший элемент текущей позиции с помощью jQuery

У меня есть документ с несколькими разделами вроде этого:

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

Как я могу привязать ближайший <div.section> к текущей позиции прокрутки (предположительно, это будет соответствовать разделу, на который в данный момент смотрит читатель)?

Ответ 1

Вы можете использовать $(window).scrollTop() и $(el).postion().top, чтобы выяснить, насколько далеко элемент находится в верхней части экрана после прокрутки.

Затем вы можете использовать эту информацию для управления элементом по желанию.

Вот рабочий пример jsfiddle: http://jsfiddle.net/gizmovation/x8FDU/

Ответ 2

Всякий раз, когда вы наведете элемент, событие mousemove сообщит вам, какой элемент вы наводите.

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

Одним из недостатков может быть тот факт, что e.target предоставит вам элемент с наивысшим z-index - тем, который находится в самом верхнем слое, поэтому, если у вас есть надпись над текстом, она даст вам оверлей а не текст div.