fix: scroll fixed header #140

Author: sendya

src/components/page/GlobalHeader.vue

@@ -1,24 +1,39 @@
 <template>
   <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
-  <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-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>
+        @click="toggle"
+      ></a-icon>
       <a-icon
         v-else
         class="trigger"
         :type="collapsed ? 'menu-unfold' : 'menu-fold'"
-        @click="toggle"/>
+        @click="toggle"
+      />
 
       <user-menu></user-menu>
     </div>
-    <div v-else :class="['top-nav-header-index', theme]">
+    <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'" />
+          <logo
+            class="top-nav-header"
+            :show-title="device !== 'mobile'"
+          />
           <s-menu
             v-if="device !== 'mobile'"
             mode="horizontal"
@@ -29,7 +44,8 @@
             v-else
             class="trigger"
             :type="collapsed ? 'menu-fold' : 'menu-unfold'"
-            @click="toggle"></a-icon>
+            @click="toggle"
+          ></a-icon>
         </div>
         <user-menu class="header-index-right"></user-menu>
       </div>
@@ -43,7 +59,8 @@ import UserMenu from '../tools/UserMenu'
 import SMenu from '../menu/'
 import Logo from '../tools/Logo'
 
-import { mixin } from '@/utils/mixin.js'
+import { mixin } from '@/utils/mixin'
+import { handleScrollHeader } from '@/utils/util'
 
 export default {
   name: 'GlobalHeader',
@@ -85,16 +102,19 @@ export default {
     }
   },
   mounted () {
-    window.addEventListener('scroll', this.handleScroll)
+    const _this = this
+    handleScrollHeader(direction => {
+      _this.handleScroll(direction)
+    })
   },
   methods: {
-    handleScroll () {
+    handleScroll (direction) {
       if (this.autoHideHeader) {
         const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-        if (scrollTop > 100) {
-          this.headerBarFixed = true
-        } else {
+        if (direction === 'up') {
           this.headerBarFixed = false
+        } else {
+          scrollTop > 100 && (this.headerBarFixed = true)
         }
       } else {
         this.headerBarFixed = false

src/utils/util.js

@@ -1,12 +1,12 @@
 export function timeFix () {
   const time = new Date()
   const hour = time.getHours()
-  return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour < 20 ? '下午好' : '晚上好')))
+  return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好'
 }
 
 export function welcome () {
   const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
-  const index = Math.floor((Math.random() * arr.length))
+  const index = Math.floor(Math.random() * arr.length)
   return arr[index]
 }
 
@@ -20,6 +20,31 @@ export function triggerWindowResizeEvent () {
   window.dispatchEvent(event)
 }
 
+export function handleScrollHeader (callback) {
+  let timer = 0
+
+  let beforeScrollTop = window.pageYOffset
+  callback = callback || function () {}
+  window.addEventListener(
+    'scroll',
+    event => {
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        let direction = 'up'
+        const afterScrollTop = window.pageYOffset
+        const delta = afterScrollTop - beforeScrollTop
+        if (delta === 0) {
+          return false
+        }
+        direction = delta > 0 ? 'down' : 'up'
+        callback(direction)
+        beforeScrollTop = afterScrollTop
+      }, 50)
+    },
+    false
+  )
+}
+
 /**
  * Remove loading animate
  * @param id parent element id or class