如何在特定高度显示元素并使用ReactJ保持粘性？

Question

我有一个粘性的下拉菜单，需要在滚动的一定高度上显示。

我正在使用reactjs，我尝试的是以下代码：

  const [stickyPillMenu, setStickyPillMenu] = useState(false);

    useEffect(() => {
   function handleSitckyPillMenu () {
        if (window.screenY >= 300) {
            setStickyPillMenu(true)
        } else {
            setStickyPillMenu(false)
        }
    }
    window.addEventListener("scroll", handleSitckyPillMenu)

    }, [])

渲染代码：

return (
      <div>
          <div className={stickyPillMenu ? "absolute top-0" : "flex sticky top-0 z-10 h-full"}>
            <div className="flex flex-col float-right ml-auto mt-1" style={{ marginRight: '6px' }}>
                <div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
                    <img className="h-5 w-5" src="../img/icons/Language.png" alt="" />
                </div>
                <div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
                    <a href="/login.html"> <img className="h-5 w-5" src="../img/icons/LoginRed.png" alt="" />
                    </a>
                </div>
                <div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">

                    <a href="/made4me.html"> <img className="h-5 w-5" src="../img/icons/StarPointer.png" alt="" />
                    </a>
                </div>
                <div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
                    <img className="h-5 w-5" src="../img/icons/HeartRed.png" alt="" />
                </div>
            </div>
        </div>
      </div>

    )

任何建议，请:)