feat: Sticky header

src/js/App.tsx

@@ -1,8 +1,10 @@
 import styled from 'styled-components';
+import { useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { EpisodeSearch } from './EpisodesSearch';
 import { UnderConstructionBanner } from './UnderConstructionBanner';
 import { EpisodeSearchFallback } from './EpisodeSearchFallback';
+import { useObserver } from './hooks/useObserver';
 
 const Wrapper = styled.div`
   display: flex;
@@ -57,6 +59,12 @@ const Wrapper = styled.div`
 `;
 
 export const App = () => {
+  const { entry, ref } = useObserver();
+
+  useEffect(() => {
+    console.info(entry);
+  }, [entry]);
+
   return (
     <Wrapper>
       <header>
@@ -71,6 +79,7 @@ export const App = () => {
         <h1>transcript.fish</h1>
         <UnderConstructionBanner />
         <img
+          ref={ref}
           className="nstaaf-logo"
           src="https://media.transcript.fish/images/logo.jpg"
         />

src/js/hooks/useObserver.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from 'react';
+
+const nArray = (n: number) => [...Array(n), 1].map((_, i) => i / n);
+
+const options = {
+  root: null,
+  threshold: nArray(4),
+};
+
+export const useObserver = () => {
+  const ref = useRef(null);
+  const [entry, setEntry] = useState<IntersectionObserverEntry>();
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setEntry(entry);
+    }, options);
+
+    const { current } = ref;
+
+    if (current) {
+      observer.observe(current);
+    }
+
+    return () => {
+      if (current) {
+        observer.unobserve(current);
+      }
+    };
+  }, []);
+
+  return {
+    entry,
+    ref,
+  };
+};