JSFiddle - React, Tailwind, and code Playground

by mrmartineau

HTML

<div class="content">
<div class="container">
        <div class="box"></div>
 </div>
</div>

CSS

body, html{
    width: 100%;
    height: 100%;
}

.content{
    width: 100%;
    height: 100%;
    overflow:scroll;
}

.box{
    position: absolute;
    top: 50px;
    width: 50px;
    height: 50px;
    background: red;
}

.container{
    height: 1000px;
}

JavaScript

var tempScrollTop = 0
var currentScrollTop = 0;
$('.content').scroll(function(){
    currentScrollTop = $('.content').scrollTop();
    if(currentScrollTop > tempScrollTop )
    {
        $('.box').css('margin-left', parseFloat($('.box').css('margin-left')) + 75);
    }
    else if(currentScrollTop < tempScrollTop )
    {
        $('.box').css('margin-left',parseFloat($('.box').css('margin-left')) - 75);
    }
    tempScrollTop = currentScrollTop;
});