Как найти ближайший элемент текущей позиции с помощью 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
.