JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<body>
<div class="wrapper"></div>
<p></p>
    
</body>

CSS

body {
 height:800px;
    width:100%;
position:relative;
}

.wrapper {
    height:20px;
    position:fixed;
    width:20px;
    background:red;
}
p {
    position:fixed;
}

JavaScript

$(window).scroll(function () {

  var windowH = $(window).height(),
      scrollY = getPageScroll()[1];

    // show the current value of Y    
    $('p').html(getPageScroll()[1]);
    $('.wrapper').stop().delay(500).css({ left : scrollY });
});

// getPageScroll()
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;
    }
    return new Array(xScroll,yScroll)
}