Html 在到达某个区段时显示导航栏#？

只有在到达某个区域时，我才能在react make show中制作导航栏？在这种情况下，它是关于部分。因为目前我是通过检查滚动位置来实现的，问题是在较大的屏幕上滚动位置不同，所以我需要确保导航栏只有在到达#about时才会固定。目前我是这样做的：

  const handleScroll = () => {
    const position = window.pageYOffset;
    setSrollPosition(position);
  };
  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
<TheAppBar position={scrollPosition > 670 ? "fixed" : "static"} id="about">

consthandlescroll=（）=>{
常量位置=window.pageYOffset；
设置滚轮位置（位置）；
};
useffect（（）=>{
addEventListener（“滚动”，handleScroll，{passive:true}）；
return（）=>{
window.removeEventListener（“滚动”，handleScroll）；
};
}, []);
670 ? “固定”：“静态”}id=“关于”>

通过利用 在本例中，我们将

ref

附加到

#about

部分

Element.getBoundingClientRect（）.top

基本上返回该元素与视口顶部之间的距离，单位为像素。在本例中，我从中减去

窗口.innerHeight

，这样我们就可以根据视口的底部而不是顶部来确定条件。注意，您可能还想考虑<代码>调整大小< /代码>事件，而不仅仅是<代码>滚动< /代码>事件以完全响应。

函数应用程序（）{
const aboutSectionRef=React.useRef（null）；
常量handleWindowScrollAndResize=e=>{
console.clear（）；
if（（aboutSectionRef.current.getBoundingClientRect（）.top-window.innerHeight）{
window.addEventListener（“卷轴”，handleWindowScrollAndResize）；
addEventListener（“调整大小”，handleWindowScrollAndResize）；
返回（（）=>{
window.removeEventListener（“滚动”，手柄indowscrollandresize）；
removeEventListener（“调整大小”，HandleIndowsCrollandResize）；
})
}，[HandleIndowsCrollandResize]）
返回(
向下滚动
关于部分我是关于部分。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一家不知名的印刷商拿起一个打印工具，将其拼凑成一本字体样本书。它不仅存活了五个世纪，而且还保存了闰年o电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行

我是一只脚
);
}
ReactDOM.render（，document.getElementById（“根”）；

Interceptor Observer可能是一个解决方案：。这样，当“关于”部分可见时，您可以调度回调函数。也许您可以尝试使用一些包检查组件是否在视口中，例如“在视口中反应”或“在视图中反应”