时间戳

首页 > 解决方案 > 为什么向下滚动导航栏不改变颜色？

javascript - 为什么向下滚动导航栏不改变颜色？

问题描述

这是我的示例代码

在浏览器中，我想向下滚动页面，导航栏会显示我显示的颜色。

 <div style={{height: "800px"}}>
        <h2 style={{backgroundColor: `${nav}`,
            position: "fixed",

            width: "100%"
          }}
        >
          NaveBar {nav ? "red" : "blue"}!
        </h2>
      </div>

它也没有改变标题和颜色的名称。我只是不知道问题出在哪里。

有人可以帮我吗？

标签： javascriptreactjsreact-hooks

解决方案

您使用字符串初始化状态， useState("red"); 然后将状态更新为对象setNav({ back });

要解决这个问题，只需将其更改为setNav(back)

顺便说一句 - 收听滚动事件可能会很慢，因此您可能想要“限制”该事件。

从 lodash 导入油门或复制粘贴此功能： https ://gist.github.com/abhinavnigam2207/a147abe0213d60467abacd33db7c6d2e

然后通过将函数包装到其中来使用它，如下所示：

useEffect(() => {
    window.addEventListener(
      "scroll",
      throttle(() => {
        const back = window.scrollY < 70 ? "red" : "blue";
        setNav(back);
      }, 100)
    );
  });

推荐阅读