JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
 <div class="object"></div>
</div>

CSS

.container{ 
    width: 4000px; 
   padding: 20px; 
    margin: 20px;
    border: 1px solid #ccc;
    height: 400px;
    position: relative;
}
.object{
  position: absolute;
    height: 400px;
    width :100px;
    background: red;
    left: 200px;
}

JavaScript

$(function() {

    var obj = $('.object');

    $(document).on('scroll', function() {

        var offset = $(this).scrollLeft()

        if (offset >= 200) {
            obj.css('position', 'fixed').css('left', '20px');
        }
                   
        if (offset >= 500) {
            obj.css('position', 'absolute').css('left', '500px');
        }
             

    });
});