support for sticky navbar

exampleSite/config.yaml

@@ -109,6 +109,9 @@ params:
     brandName: "Hugo Profile" # Brand name for the brand | default is the title variable
     disableSearch: false
     # searchPlaceholder: "Search"
+    # stickyNavBar:
+    #   enable : true
+    #   showOnScrollUp : true
     menus:
       disableAbout: false
       disableExperience: false

layouts/_default/single.html

@@ -41,7 +41,7 @@
         </div>
       </div>
       <div class="col-sm-12 col-md-12 col-lg-3">
-        <div class="sticky-sidebar">
+        <div id="stickySideBar" class="sticky-sidebar">
           {{ if .Params.toc | default true}}
           <aside class="toc">
               <h5>
@@ -125,6 +125,17 @@
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
   }
+
+  // To set height of sticky sidebar dynamically
+  let stickySideBarElem = document.getElementById("stickySideBar");
+  let stickyNavBar = {{ .Site.Params.navbar.stickyNavBar.enable | default false }};
+  if(stickyNavBar) {
+    let headerElem = document.getElementById("profileHeader");
+    let headerHeight = headerElem.offsetHeight + 15;
+    stickySideBarElem.style.top = headerHeight + "px";
+  } else {
+    stickySideBarElem.style.top = "50px";
+  }
 </script>
 
 {{ if or (.Site.Params.singlePages.readTime.enable | default true) (.Params.enableReadingTime) }}

layouts/partials/sections/header.html

@@ -18,9 +18,35 @@
     }
 </script>
 
+<!-- Show header on scroll up -->
+{{ if .Site.Params.navbar.stickyNavBar.enable | default false }}
+{{ $showNavBarOnScrollUp := .Site.Params.navbar.stickyNavBar.showOnScrollUp | default false }}
+<script>
+    var prevScrollPos = window.pageYOffset;
+    window.addEventListener("scroll", function showHeaderOnScroll() {
+        let profileHeaderElem = document.getElementById("profileHeader");
+        let currentScrollPos = window.pageYOffset;
+        let resetHeaderStyle = false;
+        let showNavBarOnScrollUp = {{ $showNavBarOnScrollUp }};
+        let showNavBar = showNavBarOnScrollUp ? prevScrollPos > currentScrollPos : currentScrollPos > 0;
+        if (showNavBar) {
+            profileHeaderElem.classList.add("showHeaderOnTop");
+        } else {
+            resetHeaderStyle = true;
+        }
+        if(currentScrollPos === 0) {
+            resetHeaderStyle = true;
+        }
+        if(resetHeaderStyle) {
+            profileHeaderElem.classList.remove("showHeaderOnTop");
+        }
+        prevScrollPos = currentScrollPos;        
+    });
+</script>
+{{ end }}
 
 <!-- Navbar -->
-<header>
+<header id="profileHeader">
     <nav class="pt-3 navbar navbar-expand-lg {{ if .Site.Params.animate }}animate{{ end }}">
         <div class="container-fluid mx-xs-2 mx-sm-5 mx-md-5 mx-lg-5">
             <!-- navbar brand -->

static/css/header.css

@@ -1,6 +1,13 @@
 header {
     z-index: 10;
     position: relative;
+    top: 0;
+}
+
+.showHeaderOnTop {
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    top: 0;
+    position: sticky;
 }
 
 header .navbar .navbar-nav a {

static/css/index.css

@@ -55,7 +55,6 @@ header .navbar.animate {
     animation: fade-up 0.5s ease-in;
 }
 
-
 /* ToolTip */
 
 .tooltip {

static/css/single.css

@@ -163,7 +163,6 @@
 
 #single .sticky-sidebar {
   position: sticky;
-  top: 50px;
 }
 
 /* Tags */