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:1000px;
    width:200px;
    margin-bottom:5px;
}
.list {
    position:fixed;
    right:0;
    top:0;
    width:200px;
    background:#ccc;
    min-height:20px;
}
.item span {
    cursor:pointer;
}
.cloned {
    background:red;
}

JavaScript

$(window).scroll(function() {
var vScroll = $(this).scrollTop();
$('.item').each(function(){
    var top=$(this).offset().top
    console.log(vScroll,top )
    if (top<vScroll && !$(this).hasClass('cloned')){
       $(this).addClass('cloned')
       var span=$('span',this).text()
       $('<li>').text(span).appendTo('.list')
     }
})
});