JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar-long"></div>
    <header>Header & Menu <br>
    header and menu content<p>Header & Menu <br>
    header and menu content<p>Header & Menu <br>
    header and menu content<p></header>
    <h1>Begin Article <br>(Need show Bar from here) </h1><p>
    <article><div class="bar-long2">
article content<br />article content<br />article content<br />
article content<br />article content<br />
article content<br />article content<br />
        article content<br />article    content<br />
        content<br />article content<br />article content<br />
        article content<br />article content<br />article content<br />
        article content<br />article content<br />article content<br />
        article content<br />article content<br />article content<br />
        article content<br />article content<br />article content<br />
        article content<br />article content<br />article content<br />
        article content<br />article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br /></div>
    <div class="bar-long3"><h1>EndEndEnd<br> (Need width Bar 100%</h1></div> </article>
    <footer> <h1>Footer</h1>
    <div class="footer"> <h4>Footer</h4> 
        <h4>Footer</h4>  <h4>Footer</h4>  <h4>Footer</h4> 
        <h4>Footer</h4> </div> </footer>

CSS

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

body {
    height:2000px;   
}

JavaScript

$(window).scroll(function() {

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $('article').height());

    $('.bar-long').css('width', scrollPercent +"%"  );

});