From 02a5a30ec60d079f9b7347766f45ccbd2bcc7ec5 Mon Sep 17 00:00:00 2001
From: Darshan Baral <darshanbaral@gmail.com>
Date: Mon, 11 May 2020 19:21:33 -0700
Subject: hides header on scroll down

---
 layouts/partials/head.html | 44 +++++++++++++++++++++++++++++++++++---------
 static/css/main.css        |  3 ++-
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index a179cac..997cbc8 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -8,20 +8,17 @@
   <meta name="description" content="{{ .Site.Params.description }}" />
   <meta name="author" content="{{ .Site.Params.author }}" />
 
-  <meta
-    property="og:url"
-    content="{{ .Permalink }}"
-  />
+  <meta property="og:url" content="{{ .Permalink }}" />
   <meta property="og:type" content="website" />
-  <meta property="og:title" content="{{ .Site.Params.title }}{{ if .Title }} - {{ .Title }} {{ end }}" />
-  <meta property="og:description" content="{{ .Site.Params.description }}" />
   <meta
-    property="og:image"
-    content="{{ `images/profile.jpg` | absURL }}"
+    property="og:title"
+    content="{{ .Site.Params.title }}{{ if .Title }} - {{ .Title }} {{ end }}"
   />
+  <meta property="og:description" content="{{ .Site.Params.description }}" />
+  <meta property="og:image" content="{{ `images/profile.jpg` | absURL }}" />
 
   {{ with .OutputFormats.Get "rss" -}}
-    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+  {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
   {{ end -}}
 
   <link rel="stylesheet" href="{{ `/css/main.css` | relURL }}" />
@@ -35,4 +32,33 @@
       font-size: {{ .Site.Params.theme.fontSize | safeCSS }};
     }
   </style>
+
+  <script>
+    let initialY;
+    window.onload = function () {
+      initialY = window.scrollY;
+    };
+
+    window.addEventListener("scroll", () => {
+      let currentY = window.scrollY;
+      let header = document.querySelector("header");
+
+      if (
+        document.body.offsetHeight - (window.innerHeight + window.pageYOffset) < 10
+      ) {
+        initialY = currentY;
+        header.style.top = "0";
+      }
+
+      if (currentY - initialY > 60) {
+        initialY = currentY;
+        header.style.top = "-58px";
+      }
+
+      if (currentY - initialY < -5) {
+        initialY = currentY;
+        header.style.top = "0";
+      } 
+    });
+  </script>
 </head>
diff --git a/static/css/main.css b/static/css/main.css
index 778e2d9..af288f1 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -37,6 +37,7 @@ header {
   position: fixed;
   top: 0;
   z-index: 30;
+  transition: all 0.3s;
 }
 header,
 footer {
@@ -297,4 +298,4 @@ li.page-item:nth-child(6) {
   max-width: 95%;
   display: block;
   margin: 1em auto;
-}
+}
\ No newline at end of file
-- 
cgit v1.2.3