progress

by toubia95

HTML

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

<div class="content">Scroll Down</div>
<div class="content">Even Further</div>
<div class="content">You Made It All The Way!</div>

CSS

/* https://codepen.io/mgrech/pen/RMJgaM */

/* Body - Margin Reset */
body { margin: 0; }

/* Progress Bar  */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: cyan;
  transition: all linear 0.1s;
  min-width: 1%;
}

/* Page Content  */
.content {
  width: 100%;
  height: 100vh;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

JavaScript

$(document).on("scroll", function(){
  var pixels = $(document).scrollTop();
  var pageHeight = $(document).height() - $(window).height();
  var progress = 100 * pixels / pageHeight;
  
  $("div.progress").css("width", progress + "%");
})

// ---- Notes ---- //

// pixels = amount of px from top of page
// pageHeight = whole page height minus viewable page height
// progress = pixels from top / page-height * 100