JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 1000px"></div>	
<div style="position: relative">
    test
						<div id="red-div">test red</div>
</div>
<div style="height: 1000px"></div>

CSS

#red-div{
    height:50px;
    width: 200px;
	position: absolute;
	top: 0px;
	left:1000px;
    background-color: red;
}

JavaScript

$(document).ready(function() { 
        jQuery(function($) {
            function fixDiv() {
                var $cacheLaptop = $('#red-div');
                var check=new Boolean();
                check=false;
                if ((check==false) && ($(window).scrollTop() > 500)) {  
                    check=true;    
                    $cacheLaptop.stop().animate(
                        { left: 0 }, {
                         duration: 1000,
                     });   
                }
            }
            $(window).scroll(fixDiv);
            fixDiv();
        });

    });