feat: add scroll.hide_header configuration item

XPoet · Nov 3, 2023 · 1bc6ba1 · 1bc6ba1
1 parent 83711e9
commit 1bc6ba1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/_config.yml b/_config.yml
@@ -93,15 +93,20 @@ scroll:
   # Show percent when page scroll
   percent: false       # Option values: true | false
 
+  # Hide header in top when page scroll
+  hide_header: true    # Option values: true | false
+
 
 # ---------------------------------------------------------------------------------------
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/home.html
 # ---------------------------------------------------------------------------------------
 home:
   # Show category in home page article block
   category: false  # Option values: true | false
+
   # Show tags in home page article block
   tag: false  # Option values: true | false
+
   # Website announcement in home page
   announcement:
 

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -17,6 +17,7 @@ KEEP.initUtils = () => {
     isHasScrollProgressBar: false,
     isHasScrollPercent: false,
     isHeaderTransparent: false,
+    isHideHeader: true,
     hasToc: false,
 
     // initialization data
@@ -30,6 +31,7 @@ KEEP.initUtils = () => {
       if (!this.isHeaderTransparent) {
         this.headerWrapperDom.classList.remove('transparent-1', 'transparent-2')
       }
+      this.isHideHeader = scroll?.hide_header !== false
     },
 
     // scroll Style Handle
@@ -73,12 +75,16 @@ KEEP.initUtils = () => {
 
       // hide header handle
       if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) {
-        this.pageTopDom.classList.add('hide')
+        if (this.isHideHeader) {
+          this.pageTopDom.classList.add('hide')
+        }
         if (this.isHeaderTransparent) {
           this.headerWrapperDom.classList.remove('transparent-1', 'transparent-2')
         }
       } else {
-        this.pageTopDom.classList.remove('hide')
+        if (this.isHideHeader) {
+          this.pageTopDom.classList.remove('hide')
+        }
         if (this.isHeaderTransparent) {
           if (scrollTop <= this.headerWrapperDom.getBoundingClientRect().height) {
             this.headerWrapperDom.classList.remove('transparent-2')