почему прокрутка вниз по навигационной панели не меняет цвет?

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)

---

Между прочим - прослушивание событий прокрутки может быть запаздывающим, поэтому вы можете захотеть «задушить» событие.

импортировать газ из loda sh или просто скопировать и вставить эту функцию: https://gist.github.com/abhinavnigam2207/a147abe0213d60467abacd33db7c6d2e

Затем вы используете его, заключая в него свою функцию, например:

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