From 1ae4979ae9df618d85343a4b39f091c207d495ff Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Tue, 5 Jan 2021 15:53:58 +0800
Subject: [PATCH] style: change the header hidden way while scrolling

---
 source/css/layout/page.styl | 5 ++++-
 source/js/toc.js            | 2 +-
 source/js/utils.js          | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index c7c8ef1..c763a0e 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -64,6 +64,10 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
         box-sizing: border-box;
         transition();
 
+        &.hide {
+          transform: translateY(-102%);
+        }
+
         .header-shrink & {
           height: $header-shrink-height;
 
@@ -120,7 +124,6 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
             width: $main-content-width-mobile;
           }
         }
-
       }
 
 
diff --git a/source/js/toc.js b/source/js/toc.js
index 17d6d45..6a00d8d 100644
--- a/source/js/toc.js
+++ b/source/js/toc.js
@@ -33,7 +33,7 @@ function initTOC() {
               scrollTop: offset - 10,
               complete: function () {
                 setTimeout(() => {
-                  KEEP.utils.pageTop_dom.style.transform = 'translateY(-100%)';
+                  KEEP.utils.pageTop_dom.classList.add('hide');
                 }, 100)
               }
             });
diff --git a/source/js/utils.js b/source/js/utils.js
index 848519d..4205f5c 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -38,9 +38,9 @@ KEEP.initUtils = () => {
 
       // hide header handle
       if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) {
-        this.pageTop_dom.style.transform = 'translateY(-100%)';
+        this.pageTop_dom.classList.add('hide');
       } else {
-        this.pageTop_dom.style.transform = 'translateY(0)';
+        this.pageTop_dom.classList.remove('hide');
       }
       this.prevScrollValue = scrollTop;
     },