Question

所以我看到了关于进度条阅读位置的interesting post，只有当元素出现在页面中（例如“ article”元素）时，该效果才会生效。

但是，当此元素的结尾出现在窗口底部时而不是到达窗口顶部时，条形可能达到100％吗？（例如单词“ EndEndEnd”）对于用户来说将更加方便。 ;-)

原始解决方案很好，但前提是“条款”下有足够的要素。如果不是，进度条将按此演示中的特定百分比停止。

$(window).scroll(function() {
    
    // calculate the percentage the user has scrolled down the page
    var scrollPercent = 100 * ($(window).scrollTop() - $('article').offset().top) / $('article').height();
    
    $('.progress-bar').css('width', scrollPercent +"%"  );
    
});

.progress-bar {
    height: 5px;
    background-color: #009ACF;
    width: 0px;
    z-index: 1000;
    position: fixed;
    top: 0px;
    left: 0;
}

article{
    background-color: rgba(255,255,255,.5);
    margin: 20px auto;
    padding: 10px 5%;
}
/* Demo stuff */
body {
  background-color: #e6f0f5;
  margin: 0;
  padding: 0 5%;
  max-width:80%;
}
html, button, input, select, textarea {
    font-family: 'Nunito', sans-serif;
    color: #92a4ad;
}
h1 {
  font-size: 40px;
  margin:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar"></div>

<header>
  <h1>Header & Menu</h1>
  The progress bar will only begin with the article in the frame.
</header>

<article>
  <h1>Begin Article</h1>
  The progress bar should now appear
  <p>Lorem ipsum dolor amet pabst knausgaard vegan master cleanse, marfa taxidermy single-origin coffee chambray distillery artisan microdosing celiac paleo. Letterpress thundercats sriracha poutine portland austin vegan hammock selfies fingerstache readymade trust fund fanny pack everyday carry. Tilde salvia woke cloud bread. Squid prism kombucha health goth letterpress. Messenger bag whatever pour-over, street art taxidermy affogato tofu quinoa woke listicle vaporware gastropub small batch. Palo santo flannel activated charcoal, williamsburg pop-up glossier whatever meditation hella.</p>
  <p>Tousled synth locavore forage, shoreditch vexillologist cray green juice semiotics vegan tilde iceland. Flexitarian tacos stumptown, locavore man braid echo park food truck meh mumblecore selvage taiyaki. Occupy shabby chic street art deep v pour-over bitters vexillologist. Meh schlitz keytar, pickled etsy artisan ugh la croix tofu forage.</p>
  <p>90's pabst meh gastropub pickled tattooed, cliche taxidermy messenger bag humblebrag. You probably haven't heard of them chicharrones cliche, pok pok lyft tousled drinking vinegar asymmetrical. Organic man braid fingerstache tbh direct trade asymmetrical. Man bun microdosing gastropub synth whatever vice biodiesel mlkshk succulents. Ethical live-edge salvia farm-to-table. Leggings try-hard scenester listicle marfa.</p>
  <p>Organic roof party schlitz meh single-origin coffee mustache. Dreamcatcher lo-fi banh mi, pickled neutra chillwave meditation. Banjo scenester lomo vice disrupt irony. Fam dreamcatcher prism lumbersexual coloring book, put a bird on it letterpress drinking vinegar. Gastropub succulents pitchfork shabby chic beard gluten-free scenester. Knausgaard salvia whatever artisan pitchfork chicharrones trust fund blue bottle.</p>
  <p>Pinterest whatever everyday carry banjo, shoreditch succulents jean shorts cardigan umami waistcoat blue bottle meggings seitan. Farm-to-table hell of locavore synth neutra enamel pin affogato mustache. Unicorn distillery hashtag four loko, you probably haven't heard of them intelligentsia small batch. Edison bulb bitters vape normcore, mumblecore gochujang cloud bread biodiesel you probably haven't heard of them ennui jianbing twee cornhole asymmetrical venmo.</p>
  <p>Activated charcoal echo park tilde, celiac you probably haven't heard of them poke irony bicycle rights. Fixie organic mustache retro gentrify craft beer portland. Prism VHS small batch seitan YOLO microdosing fingerstache. Lyft normcore pok pok tacos scenester pabst mlkshk authentic ugh seitan affogato. Farm-to-table master cleanse chillwave enamel pin fashion axe bicycle rights.</p>
  <p>Portland next level photo booth celiac polaroid hexagon selfies PBR&B tilde jianbing skateboard. Truffaut prism gastropub +1 pitchfork, kickstarter polaroid direct trade put a bird on it four loko. +1 echo park health goth godard lyft cronut, twee wayfarers four dollar toast hell of hexagon poutine chambray keytar. Pour-over fixie celiac, organic tattooed asymmetrical activated charcoal keytar.</p>
  <p>Actually gastropub vegan, chambray fashion axe typewriter godard put a bird on it poutine yuccie meggings. Ugh subway tile disrupt hella taxidermy lo-fi banh mi. Paleo microdosing scenester austin, tacos succulents lomo chia mustache waistcoat leggings PBR&B pok pok polaroid put a bird on it. Sustainable next level freegan tilde. Thundercats cronut blue bottle gochujang, you probably haven't heard of them lo-fi cloud bread echo park shabby chic put a bird on it.</p>
  <p>Enamel pin cloud bread yr fam messenger bag farm-to-table banjo master cleanse selfies. Pabst tumblr PBR&B celiac 8-bit, post-ironic woke jean shorts mlkshk. Vegan pinterest tbh, etsy 8-bit actually typewriter sustainable bicycle rights freegan tousled ugh pitchfork. Freegan four loko pabst, neutra viral XOXO pug whatever health goth austin marfa enamel pin microdosing. Pabst blog hexagon art party readymade schlitz XOXO before they sold out whatever flannel la croix stumptown etsy. Neutra dreamcatcher blue bottle intelligentsia vexillologist cold-pressed four loko salvia lyft. Gentrify roof party brooklyn, plaid cronut hammock gluten-free poutine.
  <p>Next level letterpress palo santo shaman 90's twee austin cray heirloom. Everyday carry cray small batch, ennui prism brunch flexitarian keytar tattooed bushwick swag banjo. Knausgaard dreamcatcher meggings deep v brooklyn iceland, ennui lo-fi distillery tacos. Meh neutra small batch brooklyn four loko post-ironic dreamcatcher tilde fixie artisan bitters. Truffaut cronut tousled pabst. Pitchfork letterpress williamsburg occupy.</p>
  <p>Meggings flannel iceland small batch tumblr adaptogen. Subway tile YOLO affogato banjo truffaut actually migas seitan venmo gluten-free tattooed pok pok drinking vinegar. Palo santo hoodie art party swag 8-bit enamel pin wayfarers neutra. Direct trade migas church-key VHS, salvia brunch normcore banh mi. Umami pour-over af +1, jean shorts plaid narwhal small batch sriracha etsy PBR&B chillwave.</p>
  <p>La croix sriracha fashion axe vice tbh bespoke. PBR&B intelligentsia vinyl migas, irony schlitz post-ironic authentic scenester. Banh mi paleo fashion axe green juice disrupt bespoke unicorn vape, seitan gochujang pickled distillery deep v williamsburg kogi. Fam man braid hoodie, street art pickled single-origin coffee pug lyft slow-carb cronut freegan yr. Readymade marfa normcore next level tousled cred. Health goth drinking vinegar actually truffaut slow-carb meggings.</p>
  <p>Put a bird on it hell of roof party, brooklyn normcore vexillologist vegan man braid. Squid enamel pin 8-bit farm-to-table lo-fi slow-carb hoodie butcher fixie put a bird on it selvage. Vape 8-bit sriracha 3 wolf moon four loko VHS tumeric affogato tilde craft beer pug. Vape skateboard pour-over, stumptown raw denim lo-fi small batch thundercats af unicorn occupy banh mi farm-to-table. Succulents authentic helvetica letterpress iPhone kombucha, lumbersexual af venmo.</p>
  <p>Post-ironic forage woke, activated charcoal seitan humblebrag plaid single-origin coffee waistcoat roof party jean shorts authentic. Beard waistcoat master cleanse tote bag mlkshk. Helvetica scenester fixie unicorn messenger bag hexagon letterpress yr bespoke thundercats crucifix 90's photo booth. Locavore tattooed plaid bushwick heirloom. PBR&B cray drinking vinegar swag poutine mumblecore vegan narwhal retro. Next level fingerstache pickled fashion axe. Kogi hammock everyday carry banjo.</p>
  <p>Thundercats selfies tattooed biodiesel you probably haven't heard of them, stumptown sartorial vape flexitarian iPhone drinking vinegar freegan shoreditch. Keytar yuccie air plant tumblr try-hard. Asymmetrical hoodie tacos photo booth XOXO small batch, neutra paleo fingerstache chartreuse. Typewriter direct trade pork belly vinyl. Tofu la croix messenger bag pabst kombucha. Next level fashion axe hexagon, fingerstache try-hard schlitz truffaut master cleanse flexitarian cray readymade lumbersexual. Tumblr brooklyn gastropub literally edison bulb.</p>
  <h1>End of the article</h1>
  The progress bar should be at 100% when you see this.
</article>
<footer>
    <h1>Footer</h1>
    As you can see, the progress bar is not complete. (more obvious in full page ;-)
 </footer>

谢谢;-）

Answer 1

您可以更改scrollPercent来考虑窗口 height 并将其从文章高度中减去。

var scrollPercent = 100 * ($(window).scrollTop() - $('article').offset().top) /
        ($('article').height() - $(window).height());

Answer 2

感谢@leander，这是最终结果：

$(window).scroll(function() {
    
    // calculate the percentage the user has scrolled down the page
   var scrollPercent = 100 * ($(window).scrollTop() - $('article').offset().top) /
        ($('article').height() - $(window).height());
    
    $('.progress-bar').css('width', scrollPercent +"%"  );
    
});

.progress-bar {
    height: 5px;
    background-color: #009ACF;
    width: 0px;
    z-index: 1000;
    position: fixed;
    top: 0px;
    left: 0;
}

article{
    background-color: rgba(255,255,255,.5);
    margin: 20px auto;
    padding: 10px 5%;
}
/* Demo stuff */
body {
  background-color: #e6f0f5;
  margin: 0;
  padding: 0 5%;
  max-width:60%;
}
html, button, input, select, textarea {
    font-family: 'Nunito', sans-serif;
    color: #92a4ad;
}
h1 {
  font-size: 40px;
  margin:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar"></div>

<header>
  <h1>Header & Menu</h1>
  The progress bar will only begin with the article in the frame.
</header>

<article>
  <h1>Begin Article</h1>
  The progress bar should now appear
  <p>Lorem ipsum dolor amet pabst knausgaard vegan master cleanse, marfa taxidermy single-origin coffee chambray distillery artisan microdosing celiac paleo. Letterpress thundercats sriracha poutine portland austin vegan hammock selfies fingerstache readymade trust fund fanny pack everyday carry. Tilde salvia woke cloud bread. Squid prism kombucha health goth letterpress. Messenger bag whatever pour-over, street art taxidermy affogato tofu quinoa woke listicle vaporware gastropub small batch. Palo santo flannel activated charcoal, williamsburg pop-up glossier whatever meditation hella.</p>
  <p>Tousled synth locavore forage, shoreditch vexillologist cray green juice semiotics vegan tilde iceland. Flexitarian tacos stumptown, locavore man braid echo park food truck meh mumblecore selvage taiyaki. Occupy shabby chic street art deep v pour-over bitters vexillologist. Meh schlitz keytar, pickled etsy artisan ugh la croix tofu forage.</p>
  <p>90's pabst meh gastropub pickled tattooed, cliche taxidermy messenger bag humblebrag. You probably haven't heard of them chicharrones cliche, pok pok lyft tousled drinking vinegar asymmetrical. Organic man braid fingerstache tbh direct trade asymmetrical. Man bun microdosing gastropub synth whatever vice biodiesel mlkshk succulents. Ethical live-edge salvia farm-to-table. Leggings try-hard scenester listicle marfa.</p>
  <p>Organic roof party schlitz meh single-origin coffee mustache. Dreamcatcher lo-fi banh mi, pickled neutra chillwave meditation. Banjo scenester lomo vice disrupt irony. Fam dreamcatcher prism lumbersexual coloring book, put a bird on it letterpress drinking vinegar. Gastropub succulents pitchfork shabby chic beard gluten-free scenester. Knausgaard salvia whatever artisan pitchfork chicharrones trust fund blue bottle.</p>
  <p>Pinterest whatever everyday carry banjo, shoreditch succulents jean shorts cardigan umami waistcoat blue bottle meggings seitan. Farm-to-table hell of locavore synth neutra enamel pin affogato mustache. Unicorn distillery hashtag four loko, you probably haven't heard of them intelligentsia small batch. Edison bulb bitters vape normcore, mumblecore gochujang cloud bread biodiesel you probably haven't heard of them ennui jianbing twee cornhole asymmetrical venmo.</p>
  <p>Activated charcoal echo park tilde, celiac you probably haven't heard of them poke irony bicycle rights. Fixie organic mustache retro gentrify craft beer portland. Prism VHS small batch seitan YOLO microdosing fingerstache. Lyft normcore pok pok tacos scenester pabst mlkshk authentic ugh seitan affogato. Farm-to-table master cleanse chillwave enamel pin fashion axe bicycle rights.</p>
  <p>Portland next level photo booth celiac polaroid hexagon selfies PBR&B tilde jianbing skateboard. Truffaut prism gastropub +1 pitchfork, kickstarter polaroid direct trade put a bird on it four loko. +1 echo park health goth godard lyft cronut, twee wayfarers four dollar toast hell of hexagon poutine chambray keytar. Pour-over fixie celiac, organic tattooed asymmetrical activated charcoal keytar.</p>
  <p>Actually gastropub vegan, chambray fashion axe typewriter godard put a bird on it poutine yuccie meggings. Ugh subway tile disrupt hella taxidermy lo-fi banh mi. Paleo microdosing scenester austin, tacos succulents lomo chia mustache waistcoat leggings PBR&B pok pok polaroid put a bird on it. Sustainable next level freegan tilde. Thundercats cronut blue bottle gochujang, you probably haven't heard of them lo-fi cloud bread echo park shabby chic put a bird on it.</p>
  <p>Enamel pin cloud bread yr fam messenger bag farm-to-table banjo master cleanse selfies. Pabst tumblr PBR&B celiac 8-bit, post-ironic woke jean shorts mlkshk. Vegan pinterest tbh, etsy 8-bit actually typewriter sustainable bicycle rights freegan tousled ugh pitchfork. Freegan four loko pabst, neutra viral XOXO pug whatever health goth austin marfa enamel pin microdosing. Pabst blog hexagon art party readymade schlitz XOXO before they sold out whatever flannel la croix stumptown etsy. Neutra dreamcatcher blue bottle intelligentsia vexillologist cold-pressed four loko salvia lyft. Gentrify roof party brooklyn, plaid cronut hammock gluten-free poutine.
  <p>Next level letterpress palo santo shaman 90's twee austin cray heirloom. Everyday carry cray small batch, ennui prism brunch flexitarian keytar tattooed bushwick swag banjo. Knausgaard dreamcatcher meggings deep v brooklyn iceland, ennui lo-fi distillery tacos. Meh neutra small batch brooklyn four loko post-ironic dreamcatcher tilde fixie artisan bitters. Truffaut cronut tousled pabst. Pitchfork letterpress williamsburg occupy.</p>
  <p>Meggings flannel iceland small batch tumblr adaptogen. Subway tile YOLO affogato banjo truffaut actually migas seitan venmo gluten-free tattooed pok pok drinking vinegar. Palo santo hoodie art party swag 8-bit enamel pin wayfarers neutra. Direct trade migas church-key VHS, salvia brunch normcore banh mi. Umami pour-over af +1, jean shorts plaid narwhal small batch sriracha etsy PBR&B chillwave.</p>
  <p>La croix sriracha fashion axe vice tbh bespoke. PBR&B intelligentsia vinyl migas, irony schlitz post-ironic authentic scenester. Banh mi paleo fashion axe green juice disrupt bespoke unicorn vape, seitan gochujang pickled distillery deep v williamsburg kogi. Fam man braid hoodie, street art pickled single-origin coffee pug lyft slow-carb cronut freegan yr. Readymade marfa normcore next level tousled cred. Health goth drinking vinegar actually truffaut slow-carb meggings.</p>
  <p>Put a bird on it hell of roof party, brooklyn normcore vexillologist vegan man braid. Squid enamel pin 8-bit farm-to-table lo-fi slow-carb hoodie butcher fixie put a bird on it selvage. Vape 8-bit sriracha 3 wolf moon four loko VHS tumeric affogato tilde craft beer pug. Vape skateboard pour-over, stumptown raw denim lo-fi small batch thundercats af unicorn occupy banh mi farm-to-table. Succulents authentic helvetica letterpress iPhone kombucha, lumbersexual af venmo.</p>
  <p>Post-ironic forage woke, activated charcoal seitan humblebrag plaid single-origin coffee waistcoat roof party jean shorts authentic. Beard waistcoat master cleanse tote bag mlkshk. Helvetica scenester fixie unicorn messenger bag hexagon letterpress yr bespoke thundercats crucifix 90's photo booth. Locavore tattooed plaid bushwick heirloom. PBR&B cray drinking vinegar swag poutine mumblecore vegan narwhal retro. Next level fingerstache pickled fashion axe. Kogi hammock everyday carry banjo.</p>
  <p>Thundercats selfies tattooed biodiesel you probably haven't heard of them, stumptown sartorial vape flexitarian iPhone drinking vinegar freegan shoreditch. Keytar yuccie air plant tumblr try-hard. Asymmetrical hoodie tacos photo booth XOXO small batch, neutra paleo fingerstache chartreuse. Typewriter direct trade pork belly vinyl. Tofu la croix messenger bag pabst kombucha. Next level fashion axe hexagon, fingerstache try-hard schlitz truffaut master cleanse flexitarian cray readymade lumbersexual. Tumblr brooklyn gastropub literally edison bulb.</p>
  <h1>End of the article</h1>
  The progress bar should be at 100% when you see this.
</article>
<footer>
    <h1>Footer</h1>
    As you can see, the progress bar is now complete, thanks to @leander. (more obvious in full page ;-)
 </footer>

用户可以看到文章结尾时的jQuery阅读位置进度

2 个答案: