JSFiddle - React, Tailwind, and code Playground

HTML

<div class="moving"></div>

CSS

body {
    height:1500px;
}

.moving {
    position:fixed;
    width:70%;
    left:15%;
    height:35px;
    background:red;
    bottom:0%;
}

JavaScript

//creates an element to print the values
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px" });

function ScrollMoveDiv(scrollTop){
var windowHeight = $(window).height();
var totalHeight = $(document).height() - windowHeight;
var MovePercentage = (scrollTop * 100)/totalHeight;
return MovePercentage+"%";
}

//attaches the "scroll" event
$(window).scroll(function (e) {
    var body = document.body,
        scrollTop = $("html").scrollTop() || $(body).scrollTop(),
        lastScrollTop = $(this).data("lastScrollTop") || 0,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }
    
    var MoveDistance = ScrollMoveDiv(scrollTop);
    $('.moving').css('bottom',MoveDistance);
    
    $("#test").html(scrollText +
      "<br>lastScrollTop: " + lastScrollTop +
      "<br>currentScrollTop: " + scrollTop);

    //saves the current scrollTop
    $(this).data("lastScrollTop", scrollTop);
});