Jquery / Javascript найти первый видимый элемент после прокрутки

Question

У меня есть код как показано ниже:

<div id="container">
<div class="item" id="1">blah blah</div>
<div class="item" id="2">blah blah 2</div>
</div>

Но на самом деле есть много и много с class = 'item'.

Обычно, когда пользователь прокручивает этот длинный список, я хочу изменить стиль текущего наиболее заметного (например, Google Reader!). Вы искали решение в jquery или обычном javascript, но не можете найти его. У кого-нибудь есть идеи?

Спасибо

Mark

Answer 1

Если ваши элементы не имеют одинаковую высоту, вы можете перебирать их по прокрутке:

$(document).scroll(function() {
    var cutoff = $(window).scrollTop();
    $('.item').removeClass('top').each(function() {
        if ($(this).offset().top > cutoff) {
            $(this).addClass('top');
            return false; // stops the iteration after the first one on screen
        }
    });
});

Если это слишком медленно, вы можете кэшировать $ ('. Item'). Offset () в массив, вместо того, чтобы каждый раз вызывать offset ().

Answer 2

Вот еще одна идея, основанная на встроенных функциях javascipt.

var range = document.caretRangeFromPoint(0,0); // screen coordinates of upper-left corner of a scolled area (in this case screen itself)
var element = range.startContainer.parentNode; // this an upper onscreen element

Этот фрагмент кода не является готовым продуктом - это всего лишь пример, который работает только в браузерах webkit. Если вы хотите использовать его, вам следует поискать в браузере эквивалентные браузеры caretRangeFromPoint ()

Answer 3

Вы можете создать свой собственный скроллер, используя javascript.

Это не очень практичная идея, но вы можете попробовать.

И поместите ссылку на изображение, описывающее его лучше. Это было бы очень удобно.