update

src/components/other/Header/HeaderMid/index.tsx

@@ -27,6 +27,22 @@ const HeaderMid: React.FC = () => {
     return cart.reduce((sum: number, item) => sum + Number(item.in_cart.total_price), 0);
   });
 
+  const [isFixed, setIsFixed] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const distanceFromTop = window.scrollY;
+      if (distanceFromTop > 680) {
+        setIsFixed(true);
+      } else {
+        setIsFixed(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const PopupAddress = () => {
     const modal = document.getElementById('boxShowroom') as HTMLDialogElement;
     modal?.showModal();
@@ -38,7 +54,7 @@ const HeaderMid: React.FC = () => {
   };
 
   return (
-    <div className="header-middle">
+    <div className={`header-middle ${isFixed ? 'header-fixed' : ''}`}>
       <div className="container flex items-center justify-between">
         <div className="header-middle-left flex items-center">
           <Link href="/">