JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<script src="http://benpickles.github.io/onScreen/jquery.onscreen.min.js"></script>
<header></header>
<div class="wrapper">
    <ul></ul>
</div>

CSS

header {
    top: 0;
    width: 100%;
    background: red;
    height: 30px;
    position: fixed;
}
.wrapper {
    
}

li {
    padding: 10px;
    margin: 10px;
    background: #DFD;
    list-style: none;
}

JavaScript

for(var i = 0; i < 100; i++) {
     $('.wrapper ul').append('<li id="a' + i + '">Test</li>');   
}

var tm = {};
$(window).scroll(function() {
    try {
        clearTimeout(tm);
    } catch(e) {}
    tm = setTimeout(function() {
        
    $('div').each(function() {
        if($(this).is(':onScreen')) {
            check($(this).attr('id'));
        }
    });
        
    }, 200);
});

var ids = {};
function check(id) {
    if(!(id in ids)) {
        ids[id] = 1;
        $('#' + id).append('visible');
    }
    var c = 0;
    for(var j in ids) {
     c++;   
    }
    $('header').html('visible:' + c);
}