JSFiddle - React, Tailwind, and code Playground

by arjuncc

HTML

<div id='object'></div>

CSS

#object {
    position: fixed;
    left: 0;
    top: 50%;
    height: 30px;
    width: 30px;
    background: black;
}

body {
    height: 3000px;
    background: grey;
}

JavaScript

var window_width = $(window).width() - $('#object').width();

var document_height = $(document).height() - $(window).height();

$(function () {
    $(window).scroll(function () {
        var scroll_position = $(window).scrollTop();
        var object_position_left = window_width * (scroll_position / document_height);
        $('#object').css({
            'left': object_position_left
        });
    });
});