Jquery Reading Position progress between article content

Question

In this example http://jsfiddle.net/SnJXQ/61/
that reading progress indicator but it's width increased from top of site !!

but we need progress bar width begin increasing

when article content div reached until end of article content

and this is a sample code that we need to edit
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;
 }

Jquery

$(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 + "%");

 });

Answer 1

its a little complicated but finally

$(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");
    }


});

DEMO

let me explain what is going on here

the width percentage will come from the part of the article which pass the scrollTop and divided by article height to get the percentage of that part

in if statement I create 2nd if statement to stop the blue bar at 100% not increase each time we scroll down the article

So whatever your article height this code will work

Answer 2

You are calculating in a wrong way, this is the correct one:

var scrollPercent = 100 * ($(window).scrollTop() - $('article').offset().top) / $('article').height();

FIDDLE: https://jsfiddle.net/SnJXQ/62/

Note: I set a background-color to article to see the calc better.