React实现滚动检测活跃组件并更新导航栏状态

要实现滚动到对应组件时自动激活导航链接，你可以按以下步骤操作：

1. 给目标组件添加对应ID #

首先确保每个需要匹配导航的组件根元素，都设置和Nav中href对应的id：

• Header组件根元素加 id="top"（对应导航的#）
• About组件根元素加 id="about"
• Experience组件根元素加 id="experience"
• Portfolio组件根元素加 id="portfolio"
• Contact组件根元素加 id="contact"

2. 修改Nav组件，添加滚动监听逻辑 #

更新你的Nav组件，通过useEffect注册滚动事件，编写视口判断函数，根据滚动位置自动更新激活状态：

import { useState, useEffect } from 'react';
// 导入你的图标组件（BiHome、AiOutlineUser等）

const Nav = () => {
    const [activeNav, setActiveNav] = useState('#');

    // 判断元素是否进入视口核心函数
    const isElementInViewport = (el) => {
        const rect = el.getBoundingClientRect();
        // 可自定义阈值：这里设置元素进入视口1/3高度时触发激活
        return rect.top <= window.innerHeight * 0.3 && rect.bottom >= window.innerHeight * 0.3;
    };

    // 滚动处理逻辑
    const handleScroll = () => {
        // 映射需要监听的组件ID与对应导航锚点
        const sectionMap = [
            { id: 'top', anchor: '#' },
            { id: 'about', anchor: '#about' },
            { id: 'experience', anchor: '#experience' },
            { id: 'portfolio', anchor: '#portfolio' },
            { id: 'contact', anchor: '#contact' }
        ];

        // 遍历找到当前在视口的组件，更新激活状态
        for (const section of sectionMap) {
            const targetEl = document.getElementById(section.id);
            if (targetEl && isElementInViewport(targetEl)) {
                setActiveNav(section.anchor);
                break; // 找到第一个匹配项就停止，避免重复更新
            }
        }
    };

    // 注册/移除滚动监听（加防抖优化性能）
    useEffect(() => {
        let timeoutId;
        // 防抖：100ms内只执行一次handleScroll，减少状态更新频率
        const debouncedScroll = () => {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(handleScroll, 100);
        };

        window.addEventListener('scroll', debouncedScroll);
        return () => {
            window.removeEventListener('scroll', debouncedScroll);
            clearTimeout(timeoutId);
        };
    }, []);

    return (
        <nav>
            <a href='#' onClick={() => setActiveNav('#')} className={activeNav === '#'? 'active': ''}><BiHome/></a>
            <a href='#about' onClick={() => setActiveNav('#about')} className={activeNav === '#about'? 'active': ''}><AiOutlineUser/></a>
            <a href='#experience' onClick={() => setActiveNav('#experience')} className={activeNav === '#experience'? 'active': ''}><MdWorkOutline/></a>
            <a href='#portfolio' onClick={() => setActiveNav('#portfolio')} className={activeNav === '#portfolio'? 'active': ''}><AiOutlineCode/></a>
            <a href='#contact' onClick={() => setActiveNav('#contact')} className={activeNav === '#contact'? 'active': ''}><BiMessageSquareDetail/></a>
        </nav>
    )
}

export default Nav;

3. 自定义调整（可选） #

• 视口阈值：你可以修改isElementInViewport里的window.innerHeight * 0.3，比如改成0.5就是元素中间进入视口时触发激活。
• 防抖延迟：setTimeout(handleScroll, 100)中的100ms可以根据页面流畅度调整，数值越大触发越不频繁。

内容的提问来源于stack exchange，提问作者agentK