feat(board nav): add sticky header animation to mobile

src/components/board-nav/board-nav.tsx

@@ -62,7 +62,7 @@ const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProp
   );
 
   return (
-    <div className={styles.boardNavMobile}>
+    <div className={styles.boardNavMobile} id='sticky-menu'>
       <div className={styles.boardSelect}>
         <strong>{t('board')}</strong>
         {boardSelect}
@@ -75,6 +75,52 @@ const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProp
   );
 };
 
+// sticky menu animation
+// will trigger more than once with hot reloading during development
+if (!window.STICKY_MENU_SCROLL_LISTENER) {
+  window.STICKY_MENU_SCROLL_LISTENER = true;
+
+  const scrollRange = 50; // the animation css px range in stickyMenuAnimation, must also edit css animation 100%: {top}
+  let currentScrollInRange = 0,
+    previousScroll = 0;
+
+  window.addEventListener('scroll', () => {
+    // find difference between current and last scroll position
+    const currentScroll = window.scrollY;
+    const scrollDifference = currentScroll - previousScroll;
+    previousScroll = currentScroll;
+
+    // find new current scroll in range
+    const previousScrollInRange = currentScrollInRange;
+    currentScrollInRange += scrollDifference;
+    if (currentScrollInRange > scrollRange) {
+      currentScrollInRange = scrollRange;
+    } else if (currentScrollInRange < 0) {
+      currentScrollInRange = 0;
+    }
+
+    // fix mobile overflow scroll bug
+    if (currentScroll <= 0) {
+      currentScrollInRange = 0;
+    }
+
+    // no changes
+    if (currentScrollInRange === previousScrollInRange) {
+      return;
+    }
+
+    // Get the menu element
+    const menuElement = document.getElementById('sticky-menu');
+    if (!menuElement) {
+      return;
+    }
+
+    // control progress of the animation using negative animation-delay (0 to -1s)
+    const animationPercent = currentScrollInRange / scrollRange;
+    menuElement.style.animationDelay = animationPercent * -1 + 's';
+  });
+}
+
 const BoardNav = () => {
   const subplebbitAddresses = useDefaultSubplebbitAddresses();