Question

在浏览器中，我想向下滚动页面，导航栏会说出我正在显示什么颜色。

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

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

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

有人可以帮我吗？

Answer 1

您使用字符串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)
    );
  });

为什么向下滚动导航栏不更改颜色？

1 个答案: