Jquery阅读文章内容之间的位置进展

本文介绍了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 editHTML<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阅读文章内容之间的位置进展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！