JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="scene">
<div class="first blade"> <h2>FIRST</h2></div>
  <div class="second blade"><h2>SECOND</h2></div>
  <div class="third blade"><h2>THIRD</h2></div>
</div>

CSS

.blade {
  height: 100vh;
  width: 100%;  
  border: 1px solid green;
}

JavaScript

$('.blade').each(function(){
  $(this).data('cutOff', $(this).height() * 0.3 + $(this).offset().top)
 });

$(window).on("scroll", function () {
   var scrollVal = $(this).scrollTop();
   
   $('.blade').each(function(index){
  	 if(scrollVal>=$(this).data('cutOff')) {
   			if($(this).data('cutOffReached') == false && (index <=$('.blade').length -1)){
        	  $('html, body').animate({
                scrollTop: $(this).next().offset().top
            }, 100);
            $(this).data('cutOffReached', true);        
          }        
     }else {
          $(this).data('cutOffReached', false)
     } 
 	});
});