JSFiddle - React, Tailwind, and code Playground

by amkrtchyan

HTML

<div class="content">
	<div class="block">111111111111111111111111</div> 
	<div class="block">2222222222222222222222</div> 
	<div class="block">33333333333333</div> 
	<div class="block">4444444444444444444444</div> 
	<div class="block">555555555555555555555</div> 
	<div class="block">6666666666666666666666</div> 
</div>

SCSS

.content {
	div:nth-of-type(1) {
		position: relative;
		height: 500px;
		width: 100%;
		box-sizing: border-box;
		background: yellow;
		border: 5px solid;
	}
	div:nth-of-type(2) {
		position: relative;
		height: 600px;
		width: 100%;
		box-sizing: border-box;
		background: yellow;
		border: 5px solid;}
	div:nth-of-type(3) {
		position: relative;
		height: 800px;
		width: 100%;
		box-sizing: border-box;
		background: yellow;
		border: 5px solid;}
	div:nth-of-type(4) {
		position: relative;
		height: 1000px;
		width: 100%;
		box-sizing: border-box;
		background: yellow;
		border: 5px solid;}
	div:nth-of-type(5) {
		position: relative;
		height: 1500px;
		width: 100%;
		box-sizing: border-box;
		background: yellow;
		border: 5px solid;}
	div:nth-of-type(6) {
		position: relative;
		height: 1900px;
		width: 100%;
		box-sizing: border-box;
		background: yellow;
		border: 5px solid;}
}

JavaScript

var count = $(".content > div").length;
$(window).scroll(function(){
    var scroll = $(window).scrollTop();
    var a = [];
    
    for(i=0; i< count; i++) {
        if(scroll < $(".content > div").eq(i).position().top) {
            a.push($(".content > div").eq(i).index());
        }
    }
    
    var elem = count - a.length;
    
    console.log(elem)
});