Jquery阅读文章内容之间的位置进展 [英] Jquery Reading Position progress between article content

问题描述

在此示例中
http://jsfiddle.net/SnJXQ/61/

读取进度指示器，但它的宽度从站点顶部增加!!


但我们需要进度条宽度开始增加
< br> 当文章内容div到达文章内容结尾时

这是我们需要编辑的示例代码
HTML

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

 });

推荐答案

它有点复杂但终于

$(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

宽度百分比将来自文章中传递scrollTop的部分并除以文章高度以获得该部分的百分比

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

在我创建的if语句中每当我们向下滚动文章时，第二个if语句停止蓝色条100％不增加

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

这篇关于Jquery阅读文章内容之间的位置进展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！