jQuery阅读位置文章内容之间的进度

Question

在本例中， http
: //jsfiddle.net/SnJXQ/61/表示正在读取进度指示器，但是它的宽度从站点顶部开始增加！

但是我们需要进度条的宽度

在到达文章内容div时才 开始增加，直到文章内容结束为止

，这是我们需要编辑
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

它有点复杂，但最后

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


});

演示

让我解释一下这是怎么回事

宽度百分比将来自通过滚动顶部的文章部分，然后除以文章高度，以得出该部分的百分比

在if语句中，我创建第二个if语句以使蓝色条停止在100％处，而每次我们向下滚动该文章时都不会增加

因此，无论您的文章高度如何，此代码都可以工作