diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx index c03bd92..4bea0f3 100644 --- a/src/components/layout/header.tsx +++ b/src/components/layout/header.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect, useCallback } from 'react'; +import { useState, useEffect, useCallback, useRef } from 'react'; import { Menu, X } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; import { Button } from '@/components/ui/button'; @@ -10,6 +10,8 @@ export function Header() { const [isOpen, setIsOpen] = useState(false); const [activeSection, setActiveSection] = useState('home'); const [isScrolled, setIsScrolled] = useState(false); + const isScrollingRef = useRef(false); + const scrollTimeoutRef = useRef(null); const handleNavClick = useCallback((e: React.MouseEvent, href: string) => { e.preventDefault(); @@ -17,6 +19,12 @@ export function Header() { const element = document.getElementById(targetId); if (element) { + isScrollingRef.current = true; + + if (scrollTimeoutRef.current) { + clearTimeout(scrollTimeoutRef.current); + } + const headerOffset = 64; const elementPosition = element.getBoundingClientRect().top; const offsetPosition = elementPosition + window.pageYOffset - headerOffset; @@ -28,6 +36,10 @@ export function Header() { setActiveSection(targetId); setIsOpen(false); + + scrollTimeoutRef.current = setTimeout(() => { + isScrollingRef.current = false; + }, 1000); } }, []); @@ -35,6 +47,10 @@ export function Header() { const handleScroll = () => { setIsScrolled(window.scrollY > 20); + if (isScrollingRef.current) { + return; + } + const sections = NAVIGATION.map(item => item.href.replace('#', '')); const scrollPosition = window.scrollY + 100; @@ -42,7 +58,8 @@ export function Header() { const section = document.getElementById(sections[i]); if (section) { const sectionTop = section.offsetTop; - if (scrollPosition >= sectionTop) { + const sectionBottom = sectionTop + section.offsetHeight; + if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) { setActiveSection(sections[i]); break; } @@ -53,7 +70,12 @@ export function Header() { window.addEventListener('scroll', handleScroll, { passive: true }); handleScroll(); - return () => window.removeEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + if (scrollTimeoutRef.current) { + clearTimeout(scrollTimeoutRef.current); + } + }; }, []); return ( @@ -113,7 +135,7 @@ export function Header() {