Jquery阅读文章内容之间的位置进展
在此示例中
http://jsfiddle.net/SnJXQ/61/
读取进度指示器,但它的宽度从站点顶部增加!!
但我们需要进度条宽度开始增加
当文章内容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");
}
});
让我解释一下这里发生了什么
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