JSFiddle - React, Tailwind, and code Playground

by alexpop

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>

CSS

.item {
    background:#ccc;
    height:300px;
    width:200px;
    margin-bottom:5px;
}
.list {
    position:fixed;
    right:0;
    top:0;
    width:200px;
    background:#ccc;
    min-height:20px;
}
.item span {
    cursor:pointer;
}

JavaScript

$(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>');
    }

});


//Проверка на клик по заголовку
$('.item').one('click', 'span', function() {
    $(this).clone().appendTo('.list').wrap('<li></li>');
});