feat: add support for auto-hiding flex header

closes #293

assets/js/header.js

@@ -1,8 +1,39 @@
-window.addEventListener("DOMContentLoaded", event => {
-    // Measure header height for the scrolling fix
+window.addEventListener(
+  'DOMContentLoaded',
+  (event) => {
+    /**
+     * Measure header height for the scrolling fix
+     */
     const header = document.querySelector('.header');
+
     if (header) {
-        const headerHeight = window.getComputedStyle(header, null).getPropertyValue('height');
-        document.documentElement.style.setProperty('--header-height', headerHeight);
+      const headerHeight = window
+        .getComputedStyle(header, null)
+        .getPropertyValue('height');
+
+      document.documentElement.style.setProperty(
+        '--header-height',
+        headerHeight
+      );
+
+      {{ if .Site.Params.enableHeaderAutoHide and (eq .Site.Params.headerLayout "flex") }}
+      /**
+       * Auto hide header
+       */
+      let lastScrollY = 0;
+
+      window.addEventListener(
+        'scroll',
+        throttle(() => {
+          window.scrollY > lastScrollY
+            ? header.classList.add('hide')
+            : header.classList.remove('hide');
+
+          lastScrollY = window.scrollY;
+        }, delayTime)
+      );
+      {{ end }}
     }
-}, {once: true});
+  },
+  { once: true }
+);

assets/scss/layout/_header.scss

@@ -76,3 +76,14 @@ $brandHeight: null;
         scroll-margin-top: var(--header-height);
     }
 }
+
+@if ($enableHeaderAutoHide and $headerLayoutFlex) {
+    .header {
+        top: 0;
+        transition: top 0.3s ease-in-out;
+
+        &.hide {
+            top: calc(var(--header-height) * -1);
+        }
+    }
+}

assets/scss/main.scss

@@ -25,6 +25,12 @@
     $headerLayoutFlex: false;
 {{ end }}
 
+{{ if .Site.Params.enableHeaderAutoHide }}
+    $enableHeaderAutoHide: true;
+{{ else }}
+    $enableHeaderAutoHide: false;
+{{ end }}
+
 {{ if .Site.Params.enableNavToggle }}
     $enableNavToggle: true;
 

config-examples/en/config.toml

@@ -243,6 +243,9 @@ uglyURLs = false
 
     enableHeader = true
 
+    enableHeaderAutoHide = false
+    # Note: works for header layout flex only
+
     displayHeaderInHome = true
     # Note: invalid for header layout flex
 

config-examples/zh-cn/config.toml

@@ -231,6 +231,10 @@ uglyURLs = false
     # 是否开启
     enableHeader = true
 
+    # 是否自动隐藏
+    enableHeaderAutoHide = false
+    # 说明：仅对弹性布局的顶栏有效
+
     # 是否在首页显示
     displayHeaderInHome = true
     # 说明：对弹性布局的顶栏无效

config-examples/zh-tw/config.toml

@@ -231,6 +231,10 @@ uglyURLs = false
     # 是否開啟
     enableHeader = true
 
+    # 是否自動隱藏
+    enableHeaderAutoHide = false
+    # 說明：僅對彈性佈局的頂欄有效
+
     # 是否在首頁顯示
     displayHeaderInHome = true
     # 說明：對彈性佈局的頂欄無效