JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class='container'>
  <div class='inner'>
  
  </div>
</div>

CSS

.container{width:100%; position: relative; float:left; background:#fff; height:1200px;}
.inner{width:150px; height:100px; position:absolute; top:20%; left:10%; background:red;}

JavaScript

var lastScrollTop = 0;
$(window).scroll(function(event){
    var st = $(this).scrollTop();
    if (st > lastScrollTop){
        var offset = $(".inner").offset();
        var w = $(window);
        var x = offset.left;
        $(".inner").css("left",x+50);
    } else {
        var offset = $(".inner").offset();
        var w = $(window);
        var y = offset.left;
        console.log(y);
        $(".inner").css("left",y-50);
    }
    lastScrollTop = st;
});