change(header): disable sticky setting until feature is more stable

- when sticky is active it messes up the mega menu links as it doesn't respect the z-index
eea · Jun 10, 2022 · 1d7af95 · 1d7af95
1 parent 24355d0
commit 1d7af95
Showing 1 changed file with 30 additions and 26 deletions.
diff --git a/src/ui/Header/Header.jsx b/src/ui/Header/Header.jsx
@@ -63,27 +63,28 @@ const TopDropdownMenu = ({
   );
 };
 
-const useScrollingUp = () => {
-  let prevScroll;
-
-  if (process.browser) {
-    prevScroll = window.pageYOffset;
-  }
-  const [scrollingUp, setScrollingUp] = React.useState(false);
-  const handleScroll = () => {
-    const currScroll = window.pageYOffset;
-    const isScrolled = prevScroll > currScroll;
-    setScrollingUp(isScrolled);
-    prevScroll = currScroll;
-  };
-  React.useEffect(() => {
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      window.removeEventListener('scroll', handleScroll, { passive: true });
-    };
-  });
-  return scrollingUp;
-};
+// disable sticky until it's more stable
+// const useScrollingUp = () => {
+//   let prevScroll;
+//
+//   if (process.browser) {
+//     prevScroll = window.pageYOffset;
+//   }
+//   const [scrollingUp, setScrollingUp] = React.useState(false);
+//   const handleScroll = () => {
+//     const currScroll = window.pageYOffset;
+//     const isScrolled = prevScroll > currScroll;
+//     setScrollingUp(isScrolled);
+//     prevScroll = currScroll;
+//   };
+//   React.useEffect(() => {
+//     window.addEventListener('scroll', handleScroll, { passive: true });
+//     return () => {
+//       window.removeEventListener('scroll', handleScroll, { passive: true });
+//     };
+//   });
+//   return scrollingUp;
+// };
 
 const Main = ({
   logo,
@@ -143,17 +144,20 @@ const Main = ({
   //   }
   // }, [searchIsActive, burger, menuIsActive]);
 
-  const isScrollingUp = useScrollingUp();
-
   const node = React.useRef();
   const searchButtonRef = React.useRef();
   const mobileMenuBurgerRef = React.useRef();
 
+  // disable sticky setting until feature is more stable
+  // const isScrollingUp = useScrollingUp();
+  // <div
+  // className={`main bar ${transparency ? 'transparency' : ''} ${
+  //     isScrollingUp ? 'sticky' : ''
+  // }`}
+  // >
   return (
     <div
-      className={`main bar ${transparency ? 'transparency' : ''} ${
-        isScrollingUp ? 'sticky' : ''
-      }`}
+      className={`main bar ${transparency ? 'transparency' : ''}`}
       ref={node}
     >
       <Container>