From f59a7602456da407c1aaaa2789cc3c1b2bddc9d2 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 22 Dec 2021 21:55:33 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20TopNav=E7=9B=91=E5=90=AC=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Header.js | 27 ++++++++++++++++++++++++++-
 components/TopNav.js |  2 +-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index bba55268..bd9776a9 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,6 +1,8 @@
+import { useGlobal } from '@/lib/global'
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useEffect, useState } from 'react'
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useState } from 'react'
 import Typed from 'typed.js'
 
 /**
@@ -19,6 +21,29 @@ export default function Header () {
   const scrollToCenter = () => {
     document.getElementById('wrapper').scrollIntoView({ behavior: 'smooth' })
   }
+
+  const { theme } = useGlobal()
+  // 监听滚动自动分页加载
+  const scrollTrigger = useCallback(throttle(() => {
+    if (theme !== 'dark') {
+      const stickyNavElement = document.getElementById('sticky-nav')
+      if (window.scrollY < window.innerHeight) {
+        stickyNavElement.classList.add('dark')
+      } else {
+        stickyNavElement.classList.remove('dark')
+      }
+    }
+  }, 500))
+
+  // 监听滚动
+  useEffect(() => {
+    scrollTrigger()
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
+
   return <div className='h-screen w-full'>
       <div className='absolute z-10 flex h-screen items-center justify-center w-full'>
           <div id="typed-strings">
diff --git a/components/TopNav.js b/components/TopNav.js
index 2db41297..cee4c089 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -14,7 +14,7 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory })
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className='dark flex fixed md:relative w-full top-0 z-20 transform duration-500'>
+    <div id='sticky-nav' className='flex fixed md:relative w-full top-0 z-20 transform duration-500'>
       <div className='w-full flex justify-between items-center p-4 glassmorphism'>
         {/* 左侧LOGO 标题 */}
         <div className='flex flex-none flex-grow-0'>