JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id=movingDiv></div>

CSS

body{
    height:5000px;
}

#movingDiv{
    position:absolute;
    top:100px;
    left:10px;
    width:100px;
    height:100px;
    background:red;
    border-radius:100%;
    border:4px solid chocolate;
}

JavaScript

$(function() {
    var prevRange = -1;
    var range = -1;

    $(document).on('scroll', function() {
        var top = $(document).scrollTop();      
        if (top >= 20 && top < 2401) {
            range = Math.floor(top/10)-20;
        } else {
            range = -1;
        }

        if(range != prevRange) {
            prevRange = range;
            var leftPx = (826 - range*5) + "px";
            $('#movingDiv').stop().animate({left: leftPx}, 300, "easeOutQuad" );
        }
    });
});