Reading length bar

by Louis Walch

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: 0px;
    left: 0;
}

body {
    height:2000px;   
}

article{
    background-color: lightgray;
}

JavaScript

$(window).scroll(function() {
    
    // calculate the percentage the user has scrolled down the page
    var scrollwin = $(window).scrollTop();
    var articleheight = $('article').outerHeight(true);
    var windowWidth = $(window).width();
    if(scrollwin >= $('article').offset().top){
        if(scrollwin <= ($('article').offset().top + articleheight)){
        $('.bar-long').css('width', ((scrollwin - $('article').offset().top) / articleheight) * 100 + "%"  );
        }else{
            $('.bar-long').css('width',"100%");
        }
    }else{
        $('.bar-long').css('width',"0px");
    }
    
    
});