show progress on scroll

_includes/head.html

@@ -127,6 +127,7 @@
   <script src="{{site.url}}{{site.baseurl}}/assets/bower_components/nanobar/nanobar.min.js"></script>
   <script src="{{site.url}}{{site.baseurl}}/assets/bower_components/typewrite/dist/typewrite.min.js"></script>
   <script src="{{site.url}}{{site.baseurl}}/assets/js/search.js"></script>
+  <script src="{{site.url}}{{site.baseurl}}/assets/js/on-scroll-progress.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
   <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
 

_includes/header.html

@@ -60,7 +60,7 @@
             </li> -->
           </ul>
         </nav>
-
+        <div id="progress-bar"></div>
         <!-- Search Form -->
         <div class="search-form-container">
 

_sass/devlopr.scss

@@ -114,6 +114,17 @@ ol, ul {
     background: #f69801;
 }
 
+/* On scroll progress bar */
+#progress-bar {
+    background: linear-gradient(to right, #f69801 var(--progress), transparent 0);
+    height: 5px;
+    position: fixed;
+    width: 100%;
+    overflow: hidden;
+    z-index: 1;
+    margin-top: 25px;
+}
+
 body {
     background-color: var(--main-background-color) !important;
     color: var(--main-text-color) !important;

assets/js/on-scroll-progress.js

@@ -0,0 +1,16 @@
+document.addEventListener('scroll', _ => {
+  var docElem = document.documentElement;
+  var docBody = document.body;
+  var scrollTop = (docBody.scrollTop || docElem.scrollTop);
+  var height = docElem.scrollHeight - docElem.clientHeight;
+
+  progress = scrollTop / height * 100;
+
+  if ( progress > 0) {
+    progressBar = document.querySelector('#progress-bar');
+    progressBar.style.setProperty('--progress', progress + '%');
+  } else {
+    progressBar.style.setProperty('--progress', '0%');
+  }
+});
+