JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div1">
        div1
    </div>
    
    <div class="div2">
        div2
    </div>

<div class="div3">
    div3
</div>

<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />

CSS

.div1 {
   /*top: 300px;*/
    left: 350px;
    position: absolute;
    background-color:pink;
    width:50px;
    height:50px;
    z-index: 1;
}

.div2 {
    position: absolute;
    background-color:green;
    top: 410px;
    left: 300px;
    width:300px;
    height:400px;
    z-index : 0;
}
.div3 {
    position: absolute;
    background-color:blue;
    z-index: 3;
    visibility: hidden;
}

JavaScript

$(document).ready(function() {
    var initScrollTop = $(window).scrollTop();
    $('.div1').css('top', (initScrollTop+100)+"px");
    
    $(window).scroll(function () {
        var top = parseInt($('.div1').css('top').split("px")[0]);
        
        // I GIVE A FIXED TOP TO .DIV1
        var scrollTop = $(this).scrollTop() + 100;
        $('.div1').css('top', scrollTop+"px");

        // GETTING SOME VALUES
        
        // DIV1
        var div2Top = parseInt($('.div2').css('top').split('px')[0]);
        var div2Height = parseInt($('.div2').css('height').split('px')[0]);
        var div2Bottom = parseInt($('.div2').css('bottom').split('px')[0]);
        
        // DIV2 
        var div1Width = parseInt($('.div1').css('width').split('px')[0]);
        var div1Height = parseInt($('.div1').css('height').split('px')[0]);
        var div1Top = parseInt($('.div1').css('top').split('px')[0]);
        var div1Bottom = parseInt($('.div1').css('bottom').split('px')[0]);
        var div1Left = parseInt($('.div1').css('left').split('px')[0]);
        
        // WE ARE GOING THROUGH THE GREEN BOX
        if(scrollTop + div1Height > div2Top) {
			
            
            // OUTSIDE OF THE GREEN BOX (.div2)
			if(scrollTop + div1Height > div2Height + div2Top) {

                
			   var div3Height = div2Top + div2Height - scrollTop;
				$('.div3').css('top', scrollTop+ "px")
						 // .css('bottom', div2Bottom + "px")
						  .css('width', div1Width + "px")
						  .css('height', div3Height + "px")
						  .css('visibility','visible');
						  console.log("I'm out");
			} 
            
            // INSIDE OF THE GREEN BOX (.div2)
			else {
                
				var div3Height = (div1Top > div2Top) ? div1Height : scrollTop + div1Height - div2Top;
				var div3Top = (div1Top > div2Top) ? div1Top : div2Top;
				$('.div3').css({
					'top' : div3Top + "px",
					'left': div1Left + "px",
					'width': div1Width + "px",
					'height': div3Height +...