From 87320f46890a45cf088c702930f325aeec113d7f Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 24 Dec 2021 13:43:50 +0800
Subject: [PATCH] =?UTF-8?q?bugfix:=20=E4=BF=AE=E5=A4=8D=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=82=B9=E4=B8=8D=E5=88=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Header.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index f9a247be..2d29c1a4 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -2,6 +2,7 @@ import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import throttle from 'lodash.throttle'
 import { useCallback, useEffect, useState } from 'react'
 import Typed from 'typed.js'
 
@@ -34,7 +35,9 @@ export default function Header () {
     windowTop = window.scrollY
     autoScroll = false
   }
-  const scrollTrigger = useCallback(() => {
+  const scrollTrigger = throttle(() => {
+    console.log('触发 scrollTrigger')
+
     if (
       (window.scrollY > windowTop) &
       (window.scrollY < window.innerHeight) &
@@ -54,7 +57,7 @@ export default function Header () {
     windowTop = window.scrollY
 
     updateTopNav()
-  })
+  }, 500)
 
   const updateTopNav = () => {
     if (theme !== 'dark') {
@@ -96,14 +99,14 @@ export default function Header () {
           `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${BLOG.bannerImage}")`
       }}
     >
-      <div className="absolute z-10 flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white">
+      <div className="absolute flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white">
         <div id='typed' className='flex text-center font-serif'/>
       </div>
       <div
         onClick={() => {
           scrollTo(wrapperTop, autoScrollEnd)
         }}
-        className="cursor-pointer w-full text-center py-4 text-5xl  animate-bounce absolute bottom-10 text-white"
+        className="cursor-pointer w-full text-center py-4 text-5xl animate-bounce absolute bottom-10 text-white"
       >
         <FontAwesomeIcon icon={faAngleDown} />
       </div>
@@ -112,13 +115,14 @@ export default function Header () {
 }
 
 /**
- * Native scrollTo with callback
- * @param offset - offset to scroll to
- * @param callback - callback function
- */
-function scrollTo (offset, callback) {
+   * Native scrollTo with callback
+   * @param offset - offset to scroll to
+   * @param callback - callback function
+   */
+const scrollTo = throttle((offset, callback) => {
   const fixedOffset = offset.toFixed()
   const onScroll = function () {
+    console.log('触发 scrollTo')
     if (window.pageYOffset.toFixed() === fixedOffset) {
       window.removeEventListener('scroll', onScroll)
       window.onscroll = function () {}
@@ -132,4 +136,4 @@ function scrollTo (offset, callback) {
     top: offset,
     behavior: 'smooth'
   })
-}
+}, 500)