fix: fixing navbar position while scrolling the page. (#1266)

Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

apps/formbricks-com/components/shared/Header.tsx

@@ -18,7 +18,7 @@ import { usePlausible } from "next-plausible";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { FooterLogo } from "./Logo";
 import { ThemeSelector } from "./ThemeSelector";
 
@@ -99,8 +99,27 @@ export default function Header() {
   const [mobileSubOpen, setMobileSubOpen] = useState(false);
   const plausible = usePlausible();
   const router = useRouter();
+  const [stickyNav, setStickyNav] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 250) {
+        setStickyNav(true);
+      } else {
+        setStickyNav(false);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const stickyNavClass = stickyNav
+    ? `bg-transparent shadow-md backdrop-blur-lg fixed top-0 z-30 w-full`
+    : "relative";
   return (
-    <Popover className="relative" as="header">
+    <Popover className={`${stickyNavClass}`} as="header">
       <a href="https://www.producthunt.com/products/formbricks" target="_blank">
         <div className="bg-[#ff6154] text-center text-sm text-white">
           We&apos;re launching soon on Product Hunt - get notified 🚀