您可以使用交叉点观察器来实现这一点。交叉点观察器会检测当前屏幕上的元素。您的情况很棘手，因为您需要检测您首先滚动的方向。因为当您向下滚动时，您想要在某个部分的标题在页面顶部消失时表示您正在该部分中。但是当你向上滚动的时候，你想说的是当这个部分的标题出现在页面的顶部时，你就在这个部分中了。所以首先我们需要检测滚动的方向，然后检测哪个元素出现或消失。
钩子返回引用。你必须给予你的代码中的元素一个引用，你想检测它们是否相交。比如：const [idVisible, setIdVisible] = useState("");
你的主组件需要实现const [idVisible, setIdVisible] = useState("");然后将'idVisible传递给你的导航栏来决定哪一个应该突出显示。
另一个useState const [clickedSection, setIsClickedSection] = useState(false);可能不需要。这取决于当你点击导航栏中的一个部分时，它是否会导航到页面上的该部分。如果是这样的话，你需要将setIsClickedSection函数也传递到你的导航栏。当你点击一个链接时，你需要将它设置为'true'。原因是导航到一个部分会触发滚动，并会产生奇怪的结果。这有点复杂。我花了一两天的时间才得到这个结果。如果你的最后一部分很小，它可能永远不会在屏幕的顶部相交。处理这个问题的一个方法是使用来检测你是否到达了页面的底部，然后setIdVisible到页面的最后一部分。
这是我为类似目的制作的钩子：

export const ShowSectionHook = (clickedSection: boolean, setIsClickedSection: (value: boolean) => void, setIdVisible: (value: string) => void, window: Window, lastSectionId: string, firstId?: string) => {
    const ref1 = useRef(null);
    const ref2 = useRef(null);
    const ref3 = useRef(null);
    const ref4 = useRef(null);
    const ref5 = useRef(null);
    useEffect(() => {
        //Scroll listener to determine the scroll direction
        const threshold = 0;
        let lastScrollY = window.scrollY;
        let scrollDir = "";
        const updateScrollDir = () => {
            const scrollY = window.scrollY;
            if (Math.abs(scrollY - lastScrollY) < threshold) {
                return;
            }
            scrollDir = (scrollY > lastScrollY ? "scrolling down" : "scrolling up");
            lastScrollY = scrollY > 0 ? scrollY : 0;
        };
        const onScroll = () => {
            window.requestAnimationFrame(updateScrollDir);
        };
        window.addEventListener("scroll", onScroll);
        //interjection observer to detect if the element is on the page
        const element1 = ref1.current;
        const element2 = ref2.current;
        const element3 = ref3.current;
        //create one for each section you have
        const observer = new IntersectionObserver(
            ([entry]) => {
                if (scrollDir === "scrolling down" && entry && !entry.isIntersecting && !clickedSection) {
                    setIdVisible(entry.target.id);
                }
                if (scrollDir === "scrolling up" && entry && entry.isIntersecting && !clickedSection) {
                    setIdVisible(entry.target.id);
                }
                setIsClickedSection(false);
            },
            {
                root: null, //viewport
                rootMargin: "0px",
                threshold: 1, //this means that the element get detected when 100% of the card is visible
            })
        if (element1) {
            observer.observe(element1);
        }
        if (element2) {
            observer.observe(element2);
        }
        if (element3) {
            observer.observe(element3);
        }
        return () => {
            observer.disconnect()
            window.removeEventListener("scroll", onScroll);
        }
    }, [clickedSection, setIdVisible, setIsClickedSection, window, lastSectionId, firstId])
    return {ref1: ref1, ref2: ref2, ref3: ref3}
}