remove reliance on intersection observer

components/nav/mobile/footer.module.css

@@ -6,6 +6,7 @@
     background-color: var(--bs-body-bg);
     border-top: 1px solid var(--theme-toolbarActive);
     z-index: 1000;
+    justify-content: end;
 }
 
 .footerPadding {

components/nav/sticky-bar.js

@@ -7,24 +7,26 @@ import classNames from 'classnames'
 
 export default function StickyBar ({ prefix, sub, path, topNavKey, dropNavKey }) {
   const ref = useRef()
-  const sticky = useRef()
   const me = useMe()
 
   useEffect(() => {
-    const observer = new window.IntersectionObserver(([entry]) => {
+    const stick = () => {
-      sticky?.current?.classList.toggle(styles.hide, entry.isIntersecting)
+      if (window.scrollY > 100) {
-    })
+        ref.current?.classList.remove(styles.hide)
-    ref?.current && observer.observe(ref.current)
+      } else {
+        ref.current?.classList.add(styles.hide)
+      }
+    }
+
+    window.addEventListener('scroll', stick)
 
     return () => {
-      ref?.current && observer.unobserve(ref.current)
+      window.removeEventListener('scroll', stick)
     }
-  }, [ref?.current, sticky?.current])
+  }, [ref?.current])
 
   return (
-    <>
+    <div className={classNames(styles.hide, styles.sticky)} ref={ref}>
-      <div ref={ref} style={{ position: 'relative', top: '50px' }} />
-      <div className={classNames(styles.hide, styles.sticky)} ref={sticky}>
       <Container className='px-0 d-none d-md-block'>
         <Navbar className='py-0'>
           <Nav
@@ -52,6 +54,5 @@ export default function StickyBar ({ prefix, sub, path, topNavKey, dropNavKey })
         </Navbar>
       </Container>
     </div>
-    </>
   )
 }