on scroll progress bar

by Alexandru Gatea

HTML

<div class="progress">
<span></span>
  <div class="bar"></div>
</div>

<div class="dummy-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu dolor ac risus facilisis sodales. Cras vehicula, quam quis congue blandit, mauris felis tempor lectus, vel euismod lorem tortor id dolor. In faucibus nibh at est dignissim vestibulum. Vestibulum
  sagittis gravida est ac elementum. Aliquam feugiat ultrices risus, quis sodales risus feugiat id. Suspendisse auctor ac lacus non auctor. Nulla semper, nisl ut sodales sagittis, quam dolor accumsan orci, ut accumsan elit mauris sit amet nibh. Integer
  ornare commodo fringilla. Vivamus ut massa ante. In sit amet ex vitae velit sagittis fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris non sapien magna. Quisque bibendum vestibulum lectus, pellentesque venenatis nunc. Quisque
  in dui ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec interdum, nisi a scelerisque vulputate, est purus tempus leo, aliquet aliquam leo libero a justo. Donec dolor odio, tempus et neque eu, tincidunt
  blandit metus. Fusce lacus est, consequat ac mi non, bibendum viverra nunc. Phasellus porta urna euismod nisl pretium varius. Nullam molestie venenatis ipsum blandit molestie. Donec euismod nisi vel magna elementum tempor. Ut convallis sem a justo tempus
  varius. Nulla eget enim sollicitudin, volutpat mauris vel, facilisis augue. Suspendisse placerat pellentesque leo, at consectetur ipsum. Etiam a ligula rutrum, venenatis augue vulputate, blandit augue. Proin vel purus urna. Orci varius natoque penatibus
  et magnis dis parturient montes, nascetur ridiculus mus. Nam porttitor interdum dui eu egestas. Praesent fermentum odio eu felis feugiat mollis. Pellentesque volutpat leo aliquam aliquet convallis. Praesent non urna feugiat, pharetra metus quis, pellentesque
  magna. Cras quis quam ligula. Quisque eleifend diam mauris, non eleifend mauris blandit vitae....

SCSS

.progress {
  position: fixed;
  height: 4px;
  width: 100%;
  background: #fff;
  border: 2px solid #fff;
  z-index: 1;
  .bar {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background: #0288D1;
    width: 0%;
    text-align:left;
    z-index:2;
  }
  span {
    position: absolute;
    z-index:3;
    top:0;
    left:0;
    width:100%;
    text-align:center;
    line-height: 14px;
    color: #000;
    font-size: 10px;
    font-weight: bold;
  }
}

.dummy-text {
  font-family: sans-serif;
  font-size: 0.75em;
  line-height: 1.5em;
  color: #ccc;
  padding: 50px;
}

JavaScript

jQuery(document).ready(function($) {

  //get dependency elements

  var pb = $('.progress .bar');

  var documentHeight = $('body').height();
  var windowHeight = $(window).height();
  var percentage = 100;
  console.log(documentHeight);
  console.log(windowHeight);

  $(window).on('scroll', function() {

    var scrolled = $(document).scrollTop();
    var formula = (scrolled * percentage) / (documentHeight - windowHeight);

    pb.css('width', formula + "%");
    //$('.progress span').text(Math.floor(formula) + "%");

  });
});