JSFiddle - React, Tailwind, and code Playground

by amkrtchyan

HTML

<div class="main">
          <div class="box block1"></div>
          <div class="box block2"></div>
          <div class="box block3"></div>
          <div class="box block4"></div>
    </div>

SCSS

.main {
    .box {
        position: relative;
        width: 100%;
    }
    .block1 {
        background: red;
        height: 800px;
    }
    .block2 {
        background: green;
        height: 600px;
    }
    .block3 {
        background: yellow;
        height: 900px;
    }
    .block4 {
        background: orange;
        height: 1000px;
    }
}

JavaScript

function isVisible( row, container ){
    
    var elementTop = $(row).offset().top,
        elementHeight = $(row).height(),
        containerTop = container.scrollTop(),
        containerHeight = container.height();
    
    return ((((elementTop - containerTop) + elementHeight) > 0) && ((elementTop - containerTop) < containerHeight));
}
$(window).scroll(function(){
  $('.main div').each(function(){
      if(isVisible($(this), $(window))){
      console.log($(this).attr('class')+" is visible");
      };  
  });
});