Show progress bar on scroll for a specific div-CodePudding

I want to display a progress bar while the user is scrolling, I want this progress bar to be based on a specific div, which means the progress bar should be 100% when the user scrolled to the end of the div.

Here is a fiddle: https://jsfiddle.net/tvmkf4ds/

Here is the code I use:

$(document).scroll(function () {
  var scroll = $(this).scrollTop();
  var $main = $('#scroll');
  var offsetTop = $main.offset().top;
  var offsetBottom = $main.offset().bottom;
  var height = $main.height();

  var percent = scroll - (offsetTop) / height * 100;

  $("#progress-bar-value").css('width', percent);
});

The problem is the bar is not 100% filled when you scroll at the end of #scroll element, but only when you scroll until end of page.

I tried too:

var percent = scroll - (offsetTop - offsetBottom) / height * 100;

But I can't figure out the good calculation.

CodePudding user response：

I think the percent calculation is not correct.

$(document).scroll(function () {
    ...
    var percent = (scroll - offsetTop) / height * 100;
    $("#progress-bar-value").css('width', `${percent}%`);
}

Hope it could help.

CodePudding user response：

As far as I understood your problem this might be the solution:

If it is not displayed correctly here a quick fidddle for you: https://jsfiddle.net/zh76mybt/19/

    $(document).scroll(function () {
      const scroll = $(this).scrollTop();
      const $main = $('#scroll');
      const height = $main.height();

      let percent = (scroll / height) * 1000;

      $("#progress-bar-value").css('width', percent);
    });

#progress-bar {
    background: #eaeaea;
    height: 12px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
    left: 0;
}

#progress-bar-value {
    background: #0A2D82;
    border-radius: 0 10px 10px 0;
    height: 12px;
    transition: all 0.2s;
    width: 0;
}

#header {
  height: 200px;
  padding: 40px;
  background: red;
  color: #fff;
}

#footer {
  height: 200px;
  padding: 40px;
  background: green;
  color: #fff;
}

#scroll {
  margin: 40px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  HEADER
  
  <div id="progress-bar">
    <div id="progress-bar-value"></div>
  </div>
</div>

<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed mauris ac mi luctus eleifend porta ornare leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices arcu et mauris sodales elementum. Vestibulum ornare metus vitae lorem pellentesque, id dictum nulla venenatis. Sed porttitor efficitur euismod. Integer vel est nec felis aliquam pulvinar quis sit amet dolor. In maximus ex quis odio congue imperdiet. Suspendisse id augue sapien.

Donec vehicula erat eget quam viverra sodales. Proin ex mauris, fringilla sed augue vel, volutpat mattis elit. Proin est eros, tempus eu euismod eget, facilisis in turpis. Ut molestie mauris quam, ut blandit odio ullamcorper sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula libero id dignissim blandit. Pellentesque feugiat nisi dui, quis ultrices orci ultrices sed. Mauris et dictum ante. Integer pulvinar leo mi, ac mollis ligula dignissim quis. Morbi est dui, aliquet ac consequat semper, luctus at ipsum. Fusce sollicitudin neque non purus aliquet aliquet.

Fusce nec est lacus. Morbi ut mattis tortor. Maecenas dictum orci id nisl porttitor laoreet. Quisque quis euismod ligula, id aliquet orci. Ut rutrum arcu vel suscipit dapibus. Nullam elementum quis neque eget accumsan. Donec nec sodales lacus. Fusce volutpat sollicitudin nisi non viverra. Nunc vitae aliquet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Aliquam vitae lorem at ante sollicitudin euismod. Fusce a lacus ac elit aliquet pretium. In libero lorem, rhoncus luctus arcu semper, vehicula porttitor nisl. Sed et lobortis est. Vivamus at tortor mauris. Ut vel leo eget massa lacinia bibendum. Cras elementum, nulla et varius aliquam, odio mi suscipit risus, a pellentesque lectus neque in urna. Suspendisse tempus, nisi sed finibus tempus, diam felis ultricies ante, eu tincidunt enim turpis ut purus. Sed luctus, mi eu dapibus ullamcorper, nulla diam posuere lorem, nec ornare libero justo vitae tellus. Duis purus ligula, tristique sed cursus sit amet, finibus a eros. Duis eget ipsum non enim congue vestibulum. Aliquam lobortis leo id nibh finibus, id pretium justo venenatis. Cras efficitur, ante vitae iaculis feugiat, purus sapien aliquet eros, quis feugiat orci nisi tempor lectus.

Curabitur nec cursus nisl, sed fringilla erat. In tincidunt justo eu vestibulum iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse quis pharetra ante, at commodo risus. Sed tincidunt augue eu mattis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae lectus in sapien condimentum bibendum. Curabitur at venenatis nisl.

Donec vulputate molestie orci. Sed accumsan ullamcorper suscipit. Vestibulum scelerisque tellus sed augue condimentum, ut dictum tortor finibus. Integer suscipit elit turpis, quis ultrices enim vulputate sit amet. Nam imperdiet, velit id ullamcorper bibendum, diam massa ultricies sapien, sit amet efficitur velit sem ut urna. Cras rhoncus, elit eget ultrices pellentesque, mauris est bibendum dui, a rhoncus enim quam sed neque. In ut pulvinar urna, vel efficitur erat.

Fusce sit amet dictum nulla. Proin consequat nisi non elit rhoncus gravida. In ac lacus erat. Pellentesque sit amet elit id elit fermentum ullamcorper a quis sapien. Ut semper lorem sapien, ut pretium risus iaculis id. Ut semper est sed nibh consequat vulputate. Pellentesque ornare sem non dolor lobortis tincidunt. Curabitur laoreet ex id suscipit porttitor. Integer ultrices ipsum elit, quis maximus ante luctus id. Ut eleifend, diam et dignissim scelerisque, nulla tortor volutpat magna, sit amet tristique massa lacus in nunc. Praesent diam sapien, porttitor at turpis vitae, vehicula vestibulum mauris.

Proin consectetur cursus quam, nec suscipit justo mattis sit amet. Pellentesque lobortis maximus nisi sit amet auctor. In hac habitasse platea dictumst. Suspendisse a facilisis dui. Nulla erat nisi, finibus nec tempor in, aliquet eget enim. Integer egestas maximus pharetra. Nullam hendrerit id diam nec consequat. Praesent eleifend nisl quis magna ornare, facilisis elementum lacus congue. In hac habitasse platea dictumst. Curabitur gravida ornare congue. Nullam et consequat neque. Morbi eu odio sagittis, hendrerit dui quis, euismod nulla

Fusce sit amet dictum nulla. Proin consequat nisi non elit rhoncus gravida. In ac lacus erat. Pellentesque sit amet elit id elit fermentum ullamcorper a quis sapien. Ut semper lorem sapien, ut pretium risus iaculis id. Ut semper est sed nibh consequat vulputate. Pellentesque ornare sem non dolor lobortis tincidunt. Curabitur laoreet ex id suscipit porttitor. Integer ultrices ipsum elit, quis maximus ante luctus id. Ut eleifend, diam et dignissim scelerisque, nulla tortor volutpat magna, sit amet tristique massa lacus in nunc. Praesent diam sapien, porttitor at turpis vitae, vehicula vestibulum mauris.
</div>

<div id="footer">
  FOOTER
</div>