diff --git a/src/pages/layouts/Header.js b/src/pages/layouts/Header.js
index 6f3169e6151e8cafee2e4c0055ac1b3132bed87d..f529be91b407676145deb68cf10b97830b76218e 100644
--- a/src/pages/layouts/Header.js
+++ b/src/pages/layouts/Header.js
@@ -16,11 +16,11 @@ class HeaderView extends PureComponent {
   };
 
   componentDidMount() {
-    document.getElementById('root').addEventListener('scroll', this.handScroll);
+    document.addEventListener('scroll', this.handScroll, { passive: true });
   }
 
   componentWillUnmount() {
-    document.getElementById('root').removeEventListener('scroll', this.handScroll);
+    document.removeEventListener('scroll', this.handScroll);
   }
 
   getHeadWidth = () => {
@@ -71,16 +71,22 @@ class HeaderView extends PureComponent {
     }
   };
 
-  handScroll = () => {
+  handScroll = e => {
     const { autoHideHeader } = this.props;
     const { visible } = this.state;
     if (!autoHideHeader) {
       return;
     }
-    const { scrollTop } = document.getElementById('root');
+    const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
     if (!this.ticking) {
-      this.ticking = false;
       requestAnimationFrame(() => {
+        if (this.oldScrollTop > scrollTop) {
+          this.setState({
+            visible: true,
+          });
+          this.scrollTop = scrollTop;
+          return;
+        }
         if (scrollTop > 400 && visible) {
           this.setState({
             visible: false,
@@ -91,9 +97,12 @@ class HeaderView extends PureComponent {
             visible: true,
           });
         }
+        this.oldScrollTop = scrollTop;
         this.ticking = false;
+        return;
       });
     }
+    this.ticking = false;
   };
 
   render() {