Reactjs 如何使导航栏更改滚动条上的背景色以正常工作？

这是我的代码沙盒

所以，我的页面刷新导航栏当前显示为红色，但它应该是透明的。此外，当您滚动时，它在第一个100px时变为透明，然后再次切换回红色。有什么原因可以解决这个问题吗

默认情况下，它应该是透明的，然后变为红色，但它不能正常工作

        const changeBackground = () => {
          if (window.pageYOffset >= 100 && location.pathname === "/") {
            setNavbar(window.pageYOffset);
          } else {
            setNavbar(false);
          }
        };

        useEffect(() => {
          const watchScroll = () => {
            window.addEventListener("scroll", changeBackground);
          };
          watchScroll();
          // Remove listener (like componentWillUnmount)
          return () => {
            window.removeEventListener("scroll", changeBackground);
          };
        }, []);

我只希望它在我的主页上是透明的

“/”

，然后在我滚动100px后变成红色。但是对于about页面，我只希望它永久变为红色，并禁用滚动功能

更新：所以我想如果我删除了这个代码，那么如果我滚动超过100px的值，滚动就会正常工作，但问题是现在我不能根据位置路径名更新导航栏的颜色

  useEffect(() => {
if (location.pathname) {
  setNavbar(location.pathname);
}

console.log(location.pathname);
}, [location.pathname]);

---

这是我查找我所在页面位置的功能，但它不断导致我的滚动功能出现问题。那么，我怎样才能在不破坏滚动功能的情况下检查页面路由呢？

我已经创建了codesandbox，我想它的工作原理与您预期的一样，它只需要在UseFeect函数中进行一些修改。

---

我已经创建了codesandbox，我想它的工作原理与您预期的一样，它只需要在UseFeect函数中进行一些修改。

---

因此，我最终解决了我的问题，删除了useEffect for location，只创建了一个change background函数，然后将其传递到我的样式中。你觉得我的方法有什么问题吗？我把它添加到上面的问题中，所以我最终解决了我的问题，删除了useEffect for location，只创建了一个change background函数，然后将它传递到我的样式中。你觉得我的方法有什么问题吗？我把它添加到我上面的问题中