JSFiddle - React, Tailwind, and code Playground

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

var items = $('.item');

$(window).scroll(function() {

    var vScroll = $(this).scrollTop();
    
    items.each(function () {
        if (vScroll > $(this).offset().top) {
            $('span', this).clone().appendTo('.list').wrap('<li></li>');
            items = items.not(this);
            return false; 
        }
    });

});