Add a progress bar to show the scroll position

_config.yml

@@ -308,7 +308,7 @@ enable_navbar_social:       false  # enables displaying social links in the
 enable_project_categories:  true   # enables categorization of projects into
                                    # multiple categories
 enable_medium_zoom:         true   # enables image zoom feature (as on medium.com)
-
+enable_progressbar:         false  # enables a horizontal progress bar linked to the vertical scroll position
 
 # -----------------------------------------------------------------------------
 # Library versions

_includes/header.html

@@ -108,4 +108,12 @@
           </div>
         </div>
       </nav>
-    </header>
+{% if site.enable_progressbar %}
+      <!-- Scrolling Progress Bar -->
+      <progress id="progress" value="0">
+        <div class="progress-container">
+          <span class="progress-bar"></span>
+        </div>
+      </progress>
+{%- endif %}
+    </header>

_includes/scripts/progressBar.html

@@ -0,0 +1,78 @@
+{% if site.enable_progressbar %}
+
+  <!-- Scrolling Progress Bar -->
+  <script type="text/javascript">
+    /*
+    This contribution is based upon previous work that, to the best of my
+    knowledge, was authored by Pankaj Parashar for
+    [this post](https://css-tricks.com/reading-position-indicator/)
+    in 2014. Then, it was adapted for a fork of `al-folio` by [Anthony
+    Platanios](https://github.com/eaplatanios/eaplatanios.github.io.git)
+    in 2019. Finally, I refactored the code to make it up to date with the
+    template, more maintainable, and added JS ES6 features.
+    */
+    const progressBar = $("#progress");
+    /*
+      setup the bar after all elements are done loading
+      In some cases, if the images in the page are larger than the intended
+      size they'll have on the page, they'll be resized via CSS to accomodate
+      the desired size. This mistake, however, breaks the computations as the
+      scroll size is computed as soon as the elements finish loading.
+      To account for this, a minimal delay was introduced before computing the
+      values.
+    */
+    window.onload = function() { setTimeout(progressBarSetup, 50); };
+    /*
+    We set up the bar according to the browser.
+    If the browser supports the progress element we use that.
+    Otherwise, we resize the bar thru CSS styling
+    */
+    function progressBarSetup() {
+      if ("max" in document.createElement("progress")) {
+        initializeProgressElement();
+        $(document).on("scroll", function() {
+          progressBar.attr({ value: getCurrentScrollPosition() });
+        });
+        $(window).on("resize", initializeProgressElement);
+      } else {
+        resizeProgressBar();
+        $(document).on("scroll", resizeProgressBar);
+        $(window).on("resize", resizeProgressBar);
+      }
+    }
+    /*
+     * The vertical scroll position is the same as the number of pixels that
+     * are hidden from view above the scrollable area. Thus, a value > 0 is
+     * how much the user has scrolled from the top
+     */
+    function getCurrentScrollPosition() {
+      return $(window).scrollTop();
+    }
+
+    function initializeProgressElement() {
+      let navbarHeight = $("#navbar").outerHeight(true);
+      $("body").css({ "padding-top": navbarHeight });
+      $("progress-container").css({ "padding-top": navbarHeight });
+      progressBar.css({ "top": navbarHeight });
+      progressBar.attr({ max: getDistanceToScroll(),
+        value: getCurrentScrollPosition() });
+    }
+    /*
+     * The offset between the html document height and the browser viewport
+     * height will be greater than zero if vertical scroll is possible.
+     * This is the distance the user can scroll
+     */
+    function getDistanceToScroll() {
+      return $(document).height() - $(window).height();
+    }
+
+    function resizeProgressBar() {
+      progressBar.css({ width: getWidthPercentage() + "%" });
+    }
+    // The scroll ratio equals the percentage to resize the bar
+    function getWidthPercentage() {
+      return (getCurrentScrollPosition() / getDistanceToScroll()) * 100;
+    }
+  </script>
+
+{%- endif %}

_layouts/default.html

@@ -30,5 +30,6 @@
     {% include scripts/misc.html %}
     {% include scripts/mathjax.html %}
     {% include scripts/analytics.html %}
+    {% include scripts/progressBar.html %}
   </body>
 </html>

_sass/_base.scss

@@ -656,3 +656,58 @@ html.transition *:after {
     }
   }
 }
+
+progress {
+     /* Positioning */
+     position: fixed;
+     left: 0;
+     top: 56px;
+     z-index: 10;
+
+     /* Dimensions */
+     width: 100%;
+     height: 5px;
+
+     /* Reset the appearance */
+     -webkit-appearance: none;
+        -moz-appearance: none;
+             appearance: none;
+
+     /* Get rid of the default border in Firefox/Opera. */
+     border: none;
+
+     /* Progress bar container for Firefox/IE10  */
+     background-color: transparent;
+
+     /* Progress bar value for IE10  */
+     color: var(--global-theme-color);
+ }
+
+ progress::-webkit-progress-bar {
+     background-color: transparent;
+ }
+
+ progress::-webkit-progress-value {
+     background-color: var(--global-theme-color);
+ }
+
+ progress::-moz-progress-bar {
+     background-color: var(--global-theme-color);
+ }
+
+ .progress-container {
+     width: 100%;
+     background-color: transparent;
+     position: fixed;
+     top: 56px;
+     left: 0;
+     height: 5px;
+     display: block;
+ }
+
+ .progress-bar {
+     background-color: var(--global-theme-color);
+     width: 0%;
+     display: block;
+     height: inherit;
+ }