JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div class="spacer">

</div>

<div class="paravozik">
    Choo-choo
</div>

CSS

.spacer {
    position: relative;
    height: 2500px;
    width: 100px;
}

.paravozik {
    position: fixed;
    bottom: 0; left: 0;
    width: 100px;
    height: 50px;
    background: #000;
}

JavaScript

var $win = $(window),
	$paravozik = $(".paravozik"),
    top = 0,
    height = $(document.body).innerHeight(),
    vpHeight = 0,
    percent = 0;
    
$win.on("scroll", function () {
	top = $win.scrollTop();
    vpHeight = $win.innerHeight();
    percent = top / (height - vpHeight) * 100;
    $paravozik[0].style.left = percent + "%";
});