From 998f11215bfce090727ed76ced4ee7781ed92001 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 29 Sep 2022 23:10:00 +0300
Subject: [PATCH] Fixed header class on scroll

---
 src/components/Nav/Header.module.scss | 8 ++++----
 src/components/Nav/Header.tsx         | 5 +++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index 182b7005..b11daeb9 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -138,10 +138,6 @@
     @include media-breakpoint-down(sm) {
       padding: divide($container-padding-x, 2);
     }
-
-    .header--scrolled-bottom & {
-      opacity: 0;
-    }
   }
 
   &.fixed {
@@ -170,6 +166,10 @@
   }
 }
 
+.headerScrolledBottom .mainNavigation {
+  opacity: 0;
+}
+
 .burgerContainer {
   box-sizing: content-box;
   display: inline-flex;
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index db748267..d7738caf 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -75,6 +75,7 @@ export const Header = (props: Props) => {
       setIsScrollingBottom(window.scrollY > scrollTop)
       setIsScrolled(window.scrollY > 0)
       scrollTop = window.scrollY
+      window.console.log(getIsScrollingBottom() && getIsScrolled())
     }
 
     window.addEventListener('scroll', handleScroll, { passive: true })
@@ -88,8 +89,8 @@ export const Header = (props: Props) => {
       class={styles.mainHeader}
       classList={{
         [styles.headerFixed]: props.isHeaderFixed,
-        ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
-        ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
+        [styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(),
+        [styles.headerScrolledBottom]: getIsScrollingBottom() && getIsScrolled()
       }}
     >
       <Modal name="auth">