Javascript 为什么这个元素在向后滚动时是固定的而不是相对的

我试图使元素的位置:"固定"后，它滚动到屏幕的末尾，每当它回到第一个屏幕时，它应该再次获得的位置为"相对"，但当它滚动到屏幕的末尾时，状态更改为真(已修复)，但当它回滚时，它不会更改为假(相对).

const [fixed, setFixed] = useState(() => {
    return false;
  });
const scrollHandler = () => {
    if (window.scrollY > window.innerHeight) {

      if (!fixed) {
       
        setFixed(true);
      }
    } else {
      if (fixed) {
        setFixed(false);
      }
    }
  };
  useEffect(() => {
    window.addEventListener("scroll", scrollHandler);

    return () => {
      window.removeEventListener("scroll", scrollHandler);
    };
  }, []);

return (
    <>
      <div
        style={{ position: `${fixed ? "fixed" : "relative"}` }}
        className={classes.navigationBelt}
      ></div>
 </> );

以下是代码说明 我取了一个名为"FIXED"的状态，初始值为"FALSE"

const [fixed, setFixed] = useState(() => {
    return false;
  });

当组件安装到DOM中时，我已经在滚动窗口上添加了一个EventListener.

 useEffect(() => {
    window.addEventListener("scroll", scrollHandler);

    return () => {
      window.removeEventListener("scroll", scrollHandler);
    };
  }, []);

为了处理scroll事件，我创建了一个名为"scllHandler"的函数

const scrollHandler = () => {
    if (window.scrollY > window.innerHeight) {

      if (!fixed) {
       
        setFixed(true);
      }
    } else {
      if (fixed) {
        setFixed(false);
      }
    }
  };

当滚动超过窗口高度时，我将"FIXED"设置为"TRUE"，并将一个元素设置为"FIXED".注意:我只在"FIXED"状态为FALSE时才更新状态，否则会导致多次重新渲染.

return (
    <>
      <div
        style={{ position: `${fixed ? "fixed" : "relative"}` }}
        className={classes.navigationBelt}
      ></div>
 </> );

它工作得很好，但是当它回滚时，当"Else"条件仍然命中时，状态("FIXED")显示为FALSE，即使它已经改变并且元素已经被修复.因此，setFixed(FALSE)不起作用，因为外部条件仍然为FALSE.

else {
      if (fixed) {
        setFixed(false);
      }
    }

我想知道为什么会发生这种事？