JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="body">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, hic aliquid enim esse, quas, nesciunt tenetur expedita perferendis ratione, provident eos ducimus aut. Perferendis modi voluptas nisi totam ipsam esse.</div>
  <div class="box box_1" style="background: blue;">lorem</div>
  <div class="box" style="background: yellow;"></div>
  <div class="box" style="background: brown;"></div>
  <div class="box" style="background: purple;"></div>
</div>

CSS

body {
  margin: 0;
}
div.body {
  width: 100%;
  position: relative;
  z-index: 2;
}
div.body div.box {
  width: 100%;
  height: 400px;
  background: red;
}
div.body div.box.active {
  position: fixed;
  top: 0;
  z-index: -1;
}

JavaScript

var box = document.querySelectorAll('.box');
$(window).on('scroll',function(){
    for(var i = 0; i < box.length; i++){
    	console.log($(box[i]).offset().top);
      if($(box[i]).offset().top < $(window).scrollTop() - $(box[i]).offset().top ){
      	$(box[i]).addClass('active')
        $('body').css({ paddingTop : $(box[i]).height() + 'px' })
      }else {
      }
    }
})