fix: scroll hide header #155

Author: sendya

src/components/GlobalHeader/GlobalHeader.vue

@@ -1,96 +1,104 @@
-<template>
-  <a-layout-header
-    v-if="!headerBarFixed"
-    :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
-    :style="{ padding: '0' }"
-  >
-    <div v-if="mode === 'sidemenu'" class="header">
-      <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
-      <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
-      <user-menu></user-menu>
-    </div>
-    <div v-else :class="['top-nav-header-index', theme]">
-      <div class="header-index-wide">
-        <div class="header-index-left">
-          <logo class="top-nav-header" :show-title="device !== 'mobile'"/>
-          <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
-          <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
-        </div>
-        <user-menu class="header-index-right"></user-menu>
-      </div>
-    </div>
-  </a-layout-header>
-</template>
-
-<script>
-import UserMenu from '../tools/UserMenu'
-import SMenu from '../Menu/'
-import Logo from '../tools/Logo'
-
-import { mixin } from '@/utils/mixin'
-import { handleScrollHeader } from '@/utils/util'
-
-export default {
-  name: 'GlobalHeader',
-  components: {
-    UserMenu,
-    SMenu,
-    Logo
-  },
-  mixins: [mixin],
-  props: {
-    mode: {
-      type: String,
-      // sidemenu, topmenu
-      default: 'sidemenu'
-    },
-    menus: {
-      type: Array,
-      required: true
-    },
-    theme: {
-      type: String,
-      required: false,
-      default: 'dark'
-    },
-    collapsed: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    device: {
-      type: String,
-      required: false,
-      default: 'desktop'
-    }
-  },
-  data () {
-    return {
-      headerBarFixed: false
-    }
-  },
-  mounted () {
-    const _this = this
-    handleScrollHeader(direction => {
-      _this.handleScroll(direction)
-    })
-  },
-  methods: {
-    handleScroll (direction) {
-      if (this.autoHideHeader) {
-        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-        if (direction === 'up') {
-          this.headerBarFixed = false
-        } else {
-          scrollTop > 100 && (this.headerBarFixed = true)
-        }
-      } else {
-        this.headerBarFixed = false
-      }
-    },
-    toggle () {
-      this.$emit('toggle')
-    }
-  }
-}
-</script>
+<template>
+  <a-layout-header
+    v-if="visible"
+    :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
+    :style="{ padding: '0' }"
+  >
+    <div v-if="mode === 'sidemenu'" class="header">
+      <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
+      <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
+      <user-menu></user-menu>
+    </div>
+    <div v-else :class="['top-nav-header-index', theme]">
+      <div class="header-index-wide">
+        <div class="header-index-left">
+          <logo class="top-nav-header" :show-title="device !== 'mobile'"/>
+          <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
+          <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
+        </div>
+        <user-menu class="header-index-right"></user-menu>
+      </div>
+    </div>
+  </a-layout-header>
+</template>
+
+<script>
+import UserMenu from '../tools/UserMenu'
+import SMenu from '../Menu/'
+import Logo from '../tools/Logo'
+import { mixin } from '@/utils/mixin'
+
+export default {
+  name: 'GlobalHeader',
+  components: {
+    UserMenu,
+    SMenu,
+    Logo
+  },
+  mixins: [mixin],
+  props: {
+    mode: {
+      type: String,
+      // sidemenu, topmenu
+      default: 'sidemenu'
+    },
+    menus: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    device: {
+      type: String,
+      required: false,
+      default: 'desktop'
+    }
+  },
+  data () {
+    return {
+      visible: true,
+      oldScrollTop: 0
+    }
+  },
+  mounted () {
+    document.body.addEventListener('scroll', this.handleScroll, { passive: true })
+  },
+  methods: {
+    handleScroll () {
+      if (!this.autoHideHeader) {
+        return
+      }
+
+      const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
+      if (!this.ticking) {
+        this.ticking = true
+        requestAnimationFrame(() => {
+          if (this.oldScrollTop > scrollTop) {
+            this.visible = true
+          } else if (scrollTop > 300 && this.visible) {
+            this.visible = false
+          } else if (scrollTop < 300 && !this.visible) {
+            this.visible = true
+          }
+          this.oldScrollTop = scrollTop
+          this.ticking = false
+        })
+      }
+    },
+    toggle () {
+      this.$emit('toggle')
+    }
+  },
+  beforeDestroy () {
+    document.body.removeEventListener('scrool', this.handScroll)
+  }
+}
+</script>