Skip to content

Commit 544b769

Browse files
committed
heo导航栏一点优化
1 parent f7258fd commit 544b769

File tree

1 file changed

+10
-9
lines changed

1 file changed

+10
-9
lines changed

themes/heo/components/Header.js

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { siteConfig } from '@/lib/config'
22
import { isBrowser } from '@/lib/utils'
33
import throttle from 'lodash.throttle'
4+
import { useRouter } from 'next/router'
45
import { useCallback, useEffect, useRef, useState } from 'react'
56
import DarkModeButton from './DarkModeButton'
67
import Logo from './Logo'
@@ -21,6 +22,7 @@ const Header = props => {
2122
const [navBgWhite, setBgWhite] = useState(false)
2223
const [activeIndex, setActiveIndex] = useState(0)
2324

25+
const router = useRouter()
2426
const slideOverRef = useRef()
2527

2628
const toggleMenuOpen = () => {
@@ -34,35 +36,37 @@ const Header = props => {
3436
throttle(() => {
3537
const scrollS = window.scrollY
3638
// 导航栏设置 白色背景
37-
if (scrollS <= 0) {
39+
if (scrollS <= 1) {
3840
setFixedNav(false)
3941
setBgWhite(false)
42+
setTextWhite(false)
4043

4144
// 文章详情页特殊处理
42-
if (document.querySelector('#post-bg')) {
45+
if (document?.querySelector('#post-bg')) {
4346
setFixedNav(true)
4447
setTextWhite(true)
45-
setBgWhite(false)
4648
}
4749
} else {
4850
// 向下滚动后的导航样式
4951
setFixedNav(true)
5052
setTextWhite(false)
5153
setBgWhite(true)
5254
}
53-
}, 200)
55+
}, 100)
5456
)
57+
useEffect(() => {
58+
scrollTrigger()
59+
}, [router])
5560

5661
// 监听滚动
5762
useEffect(() => {
58-
scrollTrigger()
5963
window.addEventListener('scroll', scrollTrigger)
6064
return () => {
6165
window.removeEventListener('scroll', scrollTrigger)
6266
}
6367
}, [])
6468

65-
// 监听导航栏显示文字
69+
// 导航栏根据滚动轮播菜单内容
6670
useEffect(() => {
6771
let prevScrollY = 0
6872
let ticking = false
@@ -71,17 +75,14 @@ const Header = props => {
7175
if (!ticking) {
7276
window.requestAnimationFrame(() => {
7377
const currentScrollY = window.scrollY
74-
7578
if (currentScrollY > prevScrollY) {
7679
setActiveIndex(1) // 向下滚动时设置activeIndex为1
7780
} else {
7881
setActiveIndex(0) // 向上滚动时设置activeIndex为0
7982
}
80-
8183
prevScrollY = currentScrollY
8284
ticking = false
8385
})
84-
8586
ticking = true
8687
}
8788
}

0 commit comments

Comments
 (0)