2012-05-25 3 views
13

У меня есть документ с несколькими секциями так:Как найти ближайший элемент к текущей позиции с 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> к текущей позиции прокрутки (предположительно, это будет равно к разделу, на который в данный момент смотрит читатель)?

+0

Помимо использования парить вы можете занять позицию прокрутки и вычесть высоту каждого «.section» от нее, пока она не равна 0 или меньше. Это будет все труднее, чем больше у вас есть обертывание этих div. – bygrace

+0

Существует довольно много обернутых вокруг этих divs и много внутри (это выход HTML из docbook) – Scribblemacher

+0

gizmovation дает лучший подход ниже anyways – bygrace

ответ

19

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

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

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

+1

Привет, ребята, Мне было интересно, можно ли это сделать с помощью обычного JavaScript? – AppRoyale

-5

Всякий раз, когда вы наведете элемент, событие 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.

+0

Пожалуйста, добавьте дополнительные пояснения к своему ответу и объясните, почему это работает. – Johannes

+0

@johannes - объяснение в комментарии довольно ясное ИМО. Всякий раз, когда вы наведете элемент, событие 'mousemove' сообщает вам, какой элемент вы зависнете. –

Смежные вопросы