JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar-long"></div>

CSS

.bar-long {
height: 5px;
background-color: #009ACF;
width: 0px;
z-index: 1000;
position: fixed;
top: 50px;

}

body {
 height:3000px;   
    

    
}

JavaScript

$(window).scroll(function() {
	var conheight = $('.post').height();

	
	var startDistance = 0;
	
    var scrollTop = $(document).scrollTop();
    
    
     var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height();
 
    // calculate the percentage the user has scrolled down the page
    var scrollPercent = (scrollAmount / documentHeight) * 100;
    
 
    
    
    if (scrollTop > 50) {
        $('.bar-long').css('width', scrollPercent +"%"  );
    } else {
        $('.bar-long').css('width', startDistance);
    }
    
    
    console.log (scrollPercent)
    

});