pref: colorful card

src/hooks/useSticky.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef, useState } from "react"
+
+export function useSticky() {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const [isSticky, setIsSticky] = useState(false)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([event]) => setIsSticky(event.intersectionRatio < 1),
+      { threshold: [1], rootMargin: "-1px 0px 0px 0px" },
+    )
+    observer.observe(ref.current!)
+    return () => observer.disconnect()
+  }, [])
+
+  return { ref, isSticky }
+}