JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<div class="main-content">
    <div class="center">
        
        <div class="clicked"></div>
    </div>
    
</div>

CSS

.main-content {
height: auto;
}

.center {
height:2000px;
    
}


.clicked {
background-color: red;
height: 100px;
width: 50%;
position: fixed;
top: 50px;

}
		
		
.unclicked {
background-color: green;
    height: 100px;
width: 50%;
position: fixed;
top: 50px;
}

JavaScript

$(document).ready(function() {



             $(window).scroll(function() {


                if ($(window).scrollTop() + $(window).height() >= $(document).height() - 500) {
          timeout = setTimeout(function(){ 
                $(".clicked").click(); 
          }, 300);
                } 
             });

  $(".clicked").click(function(){
      $(this).toggleClass('unclicked').toggleClass('clicked');
  });
});