[alexpop]

Здравствуйте, не могу понять, как концептуально решается следующая задача:
У меня есть несколько блоков, внутри каждого есть 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/