У меня есть код, как показано ниже:
<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, но не можете найти его. У кого-нибудь есть идеи?
Спасибо
Марк
Если ваши элементы не имеют одинаковой высоты, вы можете перебирать их по прокрутке:
$(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() каждый раз.
Вот еще одна идея, основанная на встроенных функциях 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. Если вы хотите использовать его, вы должны использовать Google для эквивалентов между браузерами caretRangeFromPoint()
Вы можете создать свой собственный скроллер, используя javascript.
Это не очень практичная идея, но вы можете попробовать.
И поместите ссылку на изображение, описывающее ее лучше. Это было бы очень полезно.