1
1
import { siteConfig } from '@/lib/config'
2
2
import { isBrowser } from '@/lib/utils'
3
3
import throttle from 'lodash.throttle'
4
+ import { useRouter } from 'next/router'
4
5
import { useCallback , useEffect , useRef , useState } from 'react'
5
6
import DarkModeButton from './DarkModeButton'
6
7
import Logo from './Logo'
@@ -21,6 +22,7 @@ const Header = props => {
21
22
const [ navBgWhite , setBgWhite ] = useState ( false )
22
23
const [ activeIndex , setActiveIndex ] = useState ( 0 )
23
24
25
+ const router = useRouter ( )
24
26
const slideOverRef = useRef ( )
25
27
26
28
const toggleMenuOpen = ( ) => {
@@ -34,35 +36,37 @@ const Header = props => {
34
36
throttle ( ( ) => {
35
37
const scrollS = window . scrollY
36
38
// 导航栏设置 白色背景
37
- if ( scrollS <= 0 ) {
39
+ if ( scrollS <= 1 ) {
38
40
setFixedNav ( false )
39
41
setBgWhite ( false )
42
+ setTextWhite ( false )
40
43
41
44
// 文章详情页特殊处理
42
- if ( document . querySelector ( '#post-bg' ) ) {
45
+ if ( document ? .querySelector ( '#post-bg' ) ) {
43
46
setFixedNav ( true )
44
47
setTextWhite ( true )
45
- setBgWhite ( false )
46
48
}
47
49
} else {
48
50
// 向下滚动后的导航样式
49
51
setFixedNav ( true )
50
52
setTextWhite ( false )
51
53
setBgWhite ( true )
52
54
}
53
- } , 200 )
55
+ } , 100 )
54
56
)
57
+ useEffect ( ( ) => {
58
+ scrollTrigger ( )
59
+ } , [ router ] )
55
60
56
61
// 监听滚动
57
62
useEffect ( ( ) => {
58
- scrollTrigger ( )
59
63
window . addEventListener ( 'scroll' , scrollTrigger )
60
64
return ( ) => {
61
65
window . removeEventListener ( 'scroll' , scrollTrigger )
62
66
}
63
67
} , [ ] )
64
68
65
- // 监听导航栏显示文字
69
+ // 导航栏根据滚动轮播菜单内容
66
70
useEffect ( ( ) => {
67
71
let prevScrollY = 0
68
72
let ticking = false
@@ -71,17 +75,14 @@ const Header = props => {
71
75
if ( ! ticking ) {
72
76
window . requestAnimationFrame ( ( ) => {
73
77
const currentScrollY = window . scrollY
74
-
75
78
if ( currentScrollY > prevScrollY ) {
76
79
setActiveIndex ( 1 ) // 向下滚动时设置activeIndex为1
77
80
} else {
78
81
setActiveIndex ( 0 ) // 向上滚动时设置activeIndex为0
79
82
}
80
-
81
83
prevScrollY = currentScrollY
82
84
ticking = false
83
85
} )
84
-
85
86
ticking = true
86
87
}
87
88
}
0 commit comments