JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="placebar">
<div id="place"></div>
</div>

<div id="content">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    
</div>

CSS

body{
    overflow-x:hidden;
}
#placebar {
    position:fixed;
        z-index:10;
        top:10px;
        left:10px;
        height:40px;
 width:1024px;   
    
    background-color:black;
}

#place {
    position:relative;
    z-index:100;
    height:40px;
    width:40px;
    background-color:white;
    left:0;
}

#content {
position:relative;            
    width:1024px;
    height:2048px;
}
p {
    color:black;
}

JavaScript

$(document).scroll(function() {
    var s = $(window).scrollTop(),
        d = $(document).height(),
        c = $(window).height();
      var percent =  scrollPercent = (s / (d-c))
    
    var newPos = percent*1024;

    if(newPos > 984) {
       newPos = 984;
    }
          
    $("#place").stop().animate({
        left: newPos+"px"
    });
});