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

src/components/board-nav/board-nav.module.css

@@ -23,9 +23,27 @@
   padding: 2px 4px;
   background-color: var(--boardnav-mobile-background-color);
   border-bottom: var(--boardnav-mobile-border-bottom);
+  font-size: var(--boardnav-mobile-font-size);
   position: fixed;
   width: 100%;
-  font-size: var(--boardnav-mobile-font-size);
+  z-index: 6;
+  animation-name: stickyMenuAnimation;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+  align-items: center;
+  justify-content: space-around;
+}
+
+@keyframes stickyMenuAnimation {
+  0% {
+    top: 0px;
+  }
+  100% {
+    top: -50px;
+  }
 }
 
 .boardNavMobile .pageJump a {

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();