JSFiddle - React, Tailwind, and code Playground

by Mohsin ali shah

HTML

<div id="one" class="allDivs"></div>        
       <div id="two" class="allDivs">           
        <div id="blueDiv"> </div>                
         </div>

CSS

body{
    
    margin: 0;
    padding: 0;
}

.allDivs{    
    width: 100%;
    height: 840px;    
}

#one{
    background-color: pink;    
}

#two{
    background-color: skyblue;
}

#three{
    background-color: coral;
}

#blueDiv{
width: 300px; 
height: 100px; 
background-color: blue; 
position: absolute;
}

JavaScript

$(document).ready(function(){
   
$(window).scrollTop(function(){
 
$(this).scroll(function(){

var scrollTopOrBottom = $(document).height() - $(window).height() - $(window).scrollTop();

    if(flag === 0 && scrollTopOrBottom < 1256){
        $('#blueDiv').animate({right: '200px'}, function(){
            flag = 1;
        });
    }

    if(flag === 1 && scrollTopOrBottom < 740){
        console.log(scrollTopOrBottom);
     $('#blueDiv').slideLeft();
        flag = 0;
  }    
    
   });
});   
   
});