Add reading progress bar

3 files changed, 14 insertions, 4 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 5188857..7a9dc05 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,4 +1,6 @@
 {{ define "main" }}
+<div id="reading-progress-bar" value="0" class="fixed z-10 top-0 left-0 h-1 bg-gray-700"></div>
+
 <article class="article">
     <h1 class="artitle__title"><a href="{{.Permalink}}">{{ .Title }}</a></h1>
 
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 0ec17be..79faecf 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -32,9 +32,13 @@ window.onscroll = function() {
 </script>
 {{else}}
 <script>
-let scrollpos = window.scrollY;
+let scrollPos = window.scrollY;
 const header = document.querySelector('#header');
 const headerContainer = document.querySelector("#header-container");
+const readingProgressBar = document.querySelector("#reading-progress-bar");
+let scrollTop = 0;
+let scrollBottom = 0;
+let scrollPercent = 0;
 
 const addClassOnScroll = () => {
   header.classList.add("shadow");
@@ -46,9 +50,13 @@ const removeClassOnScroll = () => {
 }
 
 window.onscroll = function() {
-  scrollpos = window.scrollY;
+  scrollPos = window.scrollY;
+  scrollTop = document.documentElement["scrollTop"] || document.body["scrollTop"];
+  scrollBottom = (document.documentElement["scrollHeight"] || document.body["scrollHeight"]) - document.documentElement.clientHeight;
+  scrollPercent = scrollTop / scrollBottom * 100;
+  readingProgressBar.style.width = (scrollTop / scrollBottom * 100) + '%' ;
 
-  if (scrollpos > 0) { addClassOnScroll() }
+  if (scrollPos > 0) { addClassOnScroll() }
   else { removeClassOnScroll() }
 }
 </script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 056f350..58bce01 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -34,7 +34,7 @@
     </div>
   </header>
 {{else}}
-  <header id="header" class="w-full m-0 fixed z-1 transition duration-300 ease-in-out">
+  <header id="header" class="w-full m-0 fixed z-1 transition duration-300 ease-in-out border-t-4 border-gray-300">
     <div id="header-container" class="max-w-7xl mx-auto p-6 flex items-center flex-wrap lg:flex-no-wrap relative">
       <a href="{{ .Site.Home.Permalink }}" class="leading-10 text-3xl font-normal text-gray-600 flex flex-shrink-0 flex-grow">
         {{ .Site.Title }}