storyteller landing hide top nav, show on scroll down by 100px

packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss

@@ -8,3 +8,7 @@
   background-color: $bg !important;
   border-bottom: 1px solid transparent !important;
 }
+
+.topbar-hide-top {
+  margin-top: -66px;
+}

packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx

@@ -208,10 +208,39 @@ export default function TopNav({
     }
   }, [domain.titlePart, isOnLandingPage, isOnBetaKeyRedeemPage]);
 
+  const topBarWrapper = document.getElementById("topbar-wrapper");
+
   if (
-    (domain.titlePart === "Storyteller AI" && isOnLandingPage) ||
-    isOnBetaKeyRedeemPage
+    topBarWrapper &&
+    domain.titlePart === "Storyteller AI" &&
+    isOnLandingPage
   ) {
+    topBarWrapper.classList.add("topbar-hide-top");
+  }
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (
+        topBarWrapper &&
+        domain.titlePart === "Storyteller AI" &&
+        isOnLandingPage
+      ) {
+        if (window.scrollY > 100) {
+          topBarWrapper.classList.remove("topbar-hide-top");
+        } else {
+          topBarWrapper.classList.add("topbar-hide-top");
+        }
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [domain.titlePart, isOnLandingPage, topBarWrapper]);
+
+  if (isOnBetaKeyRedeemPage) {
     return null;
   }