css - 如何正确使用 window.scrollY

Question

我只是不想在用户向上滚动时使用固定标题。但我的解决方案默认固定在顶部。

如果我默认使用固定，它会阻挡顶部的白色棍子。我尝试了 z-index 和其他东西。如果我给摇杆更多的 z 索引，它会阻止菜单。因此用户将无法单击菜单链接。

我可以在第一个 50px 高度之后激活 window.scroll 吗？

  const [direction, setDirection] = useState("up");

let oldScrollY = 0;

  const controlDirection = () => {
    if (window.scrollY > oldScrollY) {
      setDirection("down");
    } else {
      setDirection("up");
    }
    oldScrollY = window.scrollY;
  };

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

  return (
    <header
      className={styles.navbar}
      id={
        direction === "up"
          ? `${styles.fixed_navbar}`
          : direction === "down"
          ? `${styles.transparent__nav}`
          : ""
      }

Answer 1

您应该跟踪状态中 oldScrollY 的值。