Здравствуйте, не могу понять, как концептуально решается
следующая задача:
У меня есть несколько блоков, внутри каждого есть SPAN с заголовком этого блока. Также, есть пустой UL, в который необходимо копировать эти заголовки при прокрутке страницы. Причем, только один раз на каждый заголовок.
А именно: при скролле страницы, как только верхняя граница блока достигает верха окна - заголовок должен скопироваться. Затем следующий блок, и так до конца. В итог должен получиться список из всех заголовков блоков.
В чем проблема
Я не могу понять, как сделать, чтобы обрабатывался только тот блок, который пересек верхнюю границу окна, а остальные пока не включались.
Сейчас, при пересечении верха – все заголовки добавляются, причем бесконечно.
HTML
|
Код:
|
<div class="item">
<span>#1 container Title</span>
</div>
<div class="item">
<span>#2 container Title</span>
</div>
<div class="item">
<span>#3 container Title</span>
</div>
<div class="item">
<span>#4 container Title</span>
</div>
<ul class="list">
</ul> |
Что есть
$(window).scroll(function() {
var vItem = $('.item'),
vScroll = $(this).scrollTop(),
vPos = vItem.offset();
if (vScroll > vPos) {
$('.item').find('span').clone().appendTo('.list');
$('.list span').wrap('<li></li>');
}
});
http://jsfiddle.net/alexpop/QkMDR/39/
