时间戳

首页 > 解决方案 > 如何使 React Navbar 在滚动时更改背景颜色以正常工作？

reactjs - 如何使 React Navbar 在滚动时更改背景颜色以正常工作？

问题描述

这是我的代码框https://codesandbox.io/s/intelligent-sunset-smk2f?file=/src/Navbar.js

因此，我的页面刷新导航栏当前显示为红色，但它应该是透明的。此外，当您滚动时，前 100 像素会变为透明，然后再次切换回红色。任何理由如何解决这个问题？

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

        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);
          };
        }, []);

我只希望它在我的主页上是透明的，"/"然后在滚动 100 像素后变成红色。但是对于关于页面，我只希望它永久为红色并禁用滚动功能。

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

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

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

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

标签： reactjsreact-nativestyled-components

解决方案

我已经创建了代码框，我猜它可以按您的预期工作，它只需要在 useEfeect 函数中进行一些修改。 https://codesandbox.io/s/admiring-chandrasekhar-skr7i?file=/src/Navbar.js

推荐阅读