fix: 修复导航栏点击后 active 状态被滚动覆盖的问题
- 添加 isScrollingRef 标记,在点击导航后阻止滚动监听器更新 activeSection - 改进 section 检测逻辑,使用 sectionTop 和 sectionBottom 精确判断 - 点击导航后 1 秒内不响应滚动检测,确保平滑滚动完成
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||||
import { Menu, X } from 'lucide-react';
|
import { Menu, X } from 'lucide-react';
|
||||||
import { motion, AnimatePresence } from 'framer-motion';
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
@@ -10,6 +10,8 @@ export function Header() {
|
|||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [activeSection, setActiveSection] = useState('home');
|
const [activeSection, setActiveSection] = useState('home');
|
||||||
const [isScrolled, setIsScrolled] = useState(false);
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const isScrollingRef = useRef(false);
|
||||||
|
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
|
|
||||||
const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
|
const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -17,6 +19,12 @@ export function Header() {
|
|||||||
const element = document.getElementById(targetId);
|
const element = document.getElementById(targetId);
|
||||||
|
|
||||||
if (element) {
|
if (element) {
|
||||||
|
isScrollingRef.current = true;
|
||||||
|
|
||||||
|
if (scrollTimeoutRef.current) {
|
||||||
|
clearTimeout(scrollTimeoutRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
const headerOffset = 64;
|
const headerOffset = 64;
|
||||||
const elementPosition = element.getBoundingClientRect().top;
|
const elementPosition = element.getBoundingClientRect().top;
|
||||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||||
@@ -28,6 +36,10 @@ export function Header() {
|
|||||||
|
|
||||||
setActiveSection(targetId);
|
setActiveSection(targetId);
|
||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
|
|
||||||
|
scrollTimeoutRef.current = setTimeout(() => {
|
||||||
|
isScrollingRef.current = false;
|
||||||
|
}, 1000);
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@@ -35,6 +47,10 @@ export function Header() {
|
|||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
setIsScrolled(window.scrollY > 20);
|
setIsScrolled(window.scrollY > 20);
|
||||||
|
|
||||||
|
if (isScrollingRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const sections = NAVIGATION.map(item => item.href.replace('#', ''));
|
const sections = NAVIGATION.map(item => item.href.replace('#', ''));
|
||||||
const scrollPosition = window.scrollY + 100;
|
const scrollPosition = window.scrollY + 100;
|
||||||
|
|
||||||
@@ -42,7 +58,8 @@ export function Header() {
|
|||||||
const section = document.getElementById(sections[i]);
|
const section = document.getElementById(sections[i]);
|
||||||
if (section) {
|
if (section) {
|
||||||
const sectionTop = section.offsetTop;
|
const sectionTop = section.offsetTop;
|
||||||
if (scrollPosition >= sectionTop) {
|
const sectionBottom = sectionTop + section.offsetHeight;
|
||||||
|
if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
|
||||||
setActiveSection(sections[i]);
|
setActiveSection(sections[i]);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@@ -53,7 +70,12 @@ export function Header() {
|
|||||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||||
handleScroll();
|
handleScroll();
|
||||||
|
|
||||||
return () => window.removeEventListener('scroll', handleScroll);
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
if (scrollTimeoutRef.current) {
|
||||||
|
clearTimeout(scrollTimeoutRef.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -113,7 +135,7 @@ export function Header() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={(e) => {
|
onClick={() => {
|
||||||
const element = document.getElementById('contact');
|
const element = document.getElementById('contact');
|
||||||
if (element) {
|
if (element) {
|
||||||
element.scrollIntoView({ behavior: 'smooth' });
|
element.scrollIntoView({ behavior: 'smooth' });
|
||||||
@@ -124,7 +146,7 @@ export function Header() {
|
|||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={(e) => {
|
onClick={() => {
|
||||||
const element = document.getElementById('about');
|
const element = document.getElementById('about');
|
||||||
if (element) {
|
if (element) {
|
||||||
element.scrollIntoView({ behavior: 'smooth' });
|
element.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
|||||||
Reference in New Issue
Block a user