More refactoring and clean-up.

hooks/useSticky.js

@@ -1,20 +1,19 @@
 import { useState, useEffect, useRef } from 'react';
 
-export default function useSticky(
-  element = document.getElementById('layout-body'),
-  defaultSticky = false,
-) {
+export default function useSticky({ scrollElementId, defaultSticky = false }) {
   const [isSticky, setIsSticky] = useState(defaultSticky);
   const ref = useRef(null);
   const initialTop = useRef(null);
 
   useEffect(() => {
+    const element = scrollElementId ? document.getElementById(scrollElementId) : window;
+
     const handleScroll = () => {
       setIsSticky(element.scrollTop > initialTop.current);
     };
 
     if (initialTop.current === null) {
-      initialTop.current = ref.current.offsetTop;
+      initialTop.current = ref?.current?.offsetTop;
     }
 
     element.addEventListener('scroll', handleScroll);
@@ -22,7 +21,7 @@ export default function useSticky(
     return () => {
       element.removeEventListener('scroll', handleScroll);
     };
-  }, [setIsSticky]);
+  }, [ref, setIsSticky]);
 
   return { ref, isSticky };
 }