确定React应用中当前可见区域：Waypoint与原生滚动监听实现导航高亮

import React, { useEffect, useState } from 'react';
import { Box, Grid } from '@mui/material';
import { Waypoint } from 'react-waypoint';
import Navbar from './Navbar'; // 假设你的Navbar组件

const ContentLayout = () => {
  const [currentSection, setCurrentSection] = useState(1); // 默认第一个区域激活

  useEffect(() => {
    // 当 currentSection 变化时，这里可以执行更新导航栏的逻辑
    console.log(`当前激活区域是: Section ${currentSection}`);
    // 实际应用中，你可能需要向 Navbar 传递 currentSection，
    // 或在 Navbar 内部根据全局状态/Context来更新样式
  }, [currentSection]);

  return (
    <Box>
      {/* 假设 Navbar 在这里，并接收一个 prop 来高亮当前区域 */}
      <Navbar activeSection={currentSection} />

      <Grid
        container
        display={"flex"}
        flexDirection={"column"}
        minHeight={"100vh"}
        justifyContent={"space-between"}
      >
        {/* Section 1 */}
        <Waypoint
          onEnter={() => setCurrentSection(1)}
          bottomOffset="50%" // 当 Waypoint 顶部进入视口一半时触发
        />
        <Grid
          item
          flexGrow={1}
          style={{ height: "800px", background: "red", color: "white", padding: "20px" }}
        >
          <h2>Section 1</h2>
          <p>这是第一个内容区域。</p>
        </Grid>

        {/* Section 2 */}
        <Waypoint
          onEnter={() => setCurrentSection(2)}
          bottomOffset="50%" // 当 Waypoint 顶部进入视口一半时触发
        />
        <Grid
          item
          flexGrow={1}
          style={{ height: "800px", background: "white", padding: "20px" }}
        >
          <h2>Section 2</h2>
          <p>这是第二个内容区域。</p>
        </Grid>

        {/* Section 3 */}
        <Waypoint
          onEnter={() => setCurrentSection(3)}
          bottomOffset="50%" // 当 Waypoint 顶部进入视口一半时触发
        />
        <Grid
          item
          flexGrow={1}
          style={{ height: "800px", background: "green", color: "white", padding: "20px" }}
        >
          <h2>Section 3</h2>
          <p>这是第三个内容区域。</p>
        </Grid>
      </Grid>
    </Box>
  );
};

export default ContentLayout;

import React, { useEffect, useRef, useState } from 'react';
import { Box, Grid } from '@mui/material';
import Navbar from './Navbar'; // 假设你的Navbar组件

const ContentLayoutNative = () => {
  const sectionRefs = {
    section1: useRef(null),
    section2: useRef(null),
    section3: useRef(null),
  };
  const [currentSectionId, setCurrentSectionId] = useState('section1'); // 默认第一个区域激活

  const handleScroll = () => {
    const scrollPosition = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;

    let activeSection = null;
    for (const id in sectionRefs) {
      const sectionElement = sectionRefs[id].current;
      if (sectionElement) {
        const sectionTop = sectionElement.offsetTop;
        const sectionBottom = sectionTop + sectionElement.offsetHeight;

        // 判断区域是否大部分在视口内
        // 这里可以根据需求调整判断逻辑，例如：
        // 1. 区域顶部进入视口，且区域底部未完全离开视口
        // 2. 区域中心点在视口中心点附近
        // 3. 区域的可见部分超过一定比例

        // 示例：当区域的顶部或中部进入视口时视为激活
        if (
            scrollPosition + windowHeight / 2 >= sectionTop && 
            scrollPosition + windowHeight / 2 < sectionBottom
        ) {
          activeSection = id;
          break; // 找到第一个符合条件的即可
        }
      }
    }

    if (activeSection && activeSection !== currentSectionId) {
      setCurrentSectionId(activeSection);
    } else if (!activeSection && scrollPosition < sectionRefs.section1.current.offsetTop) {
      // 如果滚动到最顶部，且没有活跃区域，则默认激活第一个
      setCurrentSectionId('section1');
    }
  };

  useEffect(() => {
    // 初始设置，确保组件加载时第一个区域是激活的
    // 确保 DOM 元素已渲染，否则 offsetTop 为 0
    const initialSection = sectionRefs.section1.current;
    if (initialSection) {
        // 如果需要更精确的初始判断，可以在这里调用 handleScroll
        // 但通常默认第一个是合理的
        setCurrentSectionId('section1'); 
    }

    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行

  useEffect(() => {
    // 当 currentSectionId 变化时，这里可以执行更新导航栏的逻辑
    console.log(`当前激活区域是: ${currentSectionId}`);
    // 实际应用中，你可能需要向 Navbar 传递 currentSectionId，
    // 或在 Navbar 内部根据全局状态/Context来更新样式
  }, [currentSectionId]);

  return (
    <Box>
      <Navbar activeSection={currentSectionId} />

      <Grid
        container
        display={"flex"}
        flexDirection={"column"}
        minHeight={"100vh"}
        justifyContent={"space-between"}
      >
        <Grid
          id="section1"
          item
          flexGrow={1}
          style={{ height: "800px", background: "red", color: "white", padding: "20px" }}
          ref={sectionRefs.section1}
        >
          <h2>Section 1</h2>
          <p>这是第一个内容区域。</p>
        </Grid>
        <Grid
          id="section2"
          item
          flexGrow={1}
          style={{ height: "800px", background: "white", padding: "20px" }}
          ref={sectionRefs.section2}
        >
          <h2>Section 2</h2>
          <p>这是第二个内容区域。</p>
        </Grid>
        <Grid
          id="section3"
          item
          flexGrow={1}
          style={{ height: "800px", background: "green", color: "white", padding: "20px" }}
          ref={sectionRefs.section3}
        >
          <h2>Section 3</h2>
          <p>这是第三个内容区域。</p>
        </Grid>
      </Grid>
    </Box>
  );
};

export default ContentLayoutNative;