javascript - Jquery Reading Position progress between article content - Stack Overflow

admin管理员组

文章数量:1400776

In this example /
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 + "%");

 });

In this example http://jsfiddle/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 + "%");

 });

• javascript
• jquery
• html
• css
• scroll

Share Improve this question Follow edited Jun 14, 2015 at 0:12 Muhamed Ahmed asked Jun 13, 2015 at 23:57 Muhamed AhmedMuhamed Ahmed 14233 silver badges2020 bronze badges 1

• Are you looking for something like this? jsfiddle/SnJXQ/68 – BuddhistBeast Commented Jun 14, 2015 at 1:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

its a little plicated 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 e 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

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/SnJXQ/62/

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

本文标签： javascriptJquery Reading Position progress between article contentStack Overflow