From 4d32436018b8d35c26be947ead9cf60252205557 Mon Sep 17 00:00:00 2001
From: Ayush Mukherjee <me@ayushm.com>
Date: Tue, 19 Sep 2023 18:24:47 +0530
Subject: [PATCH] fix header not turning dark on scroll

---
 src/scss/pages/_rumble.scss  |  8 ++++++--
 src/views/RegionalRumble.vue | 20 +++++++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss
index 8a1d690..09d7a87 100644
--- a/src/scss/pages/_rumble.scss
+++ b/src/scss/pages/_rumble.scss
@@ -1,3 +1,7 @@
+.scroll {
+  background: rgba(black, 0.5) !important;
+}
+
 .rumble {
   display: flex;
   flex-direction: column;
@@ -97,7 +101,7 @@
       align-self: flex-end;
       left: 0;
       right: 0;
-      top: 62%;
+      top: 60%;
       bottom: 0;
       margin: auto;
     }
@@ -162,7 +166,7 @@
         width: 50%;
       }
 
-      .overlay {
+      .unoverlay {
         display: block;
         position: absolute;
         width: 100%;
diff --git a/src/views/RegionalRumble.vue b/src/views/RegionalRumble.vue
index 5ed03e9..1e89252 100644
--- a/src/views/RegionalRumble.vue
+++ b/src/views/RegionalRumble.vue
@@ -14,15 +14,15 @@
 
     <section class="selector">
       <div class="apac">
-        <span class="overlay"></span>
+        <span class="unoverlay"></span>
         <img alt="Regional Rumble APAC Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65086296b79fcrr23-brand-logo-asia-white.png" />
       </div>
       <div class="me">
-        <span class="overlay"></span>
+        <span class="unoverlay"></span>
         <img alt="Regional Rumble MENA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629a9ba86rr23-brand-logo-mena-white.png" />
       </div>
       <div class="ssa">
-        <span class="overlay"></span>
+        <span class="unoverlay"></span>
         <img alt="Regional Rumble SSA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629d08e60rr23-brand-logo-ssa-white.png" />
       </div>
     </section>
@@ -36,6 +36,20 @@
 export default {
   name: 'RegionalRumble',
   mounted() {
+    const h = document.querySelector('header');
+    const container = document.querySelector('.rumble');
+    container.addEventListener('scroll', () => {
+      if(container.scrollTop > 128) {
+          if(!h.classList.contains('scroll')) {
+              h.classList.add('scroll')
+          }
+      } else {
+          if(h.classList.contains('scroll')) {
+              h.classList.remove('scroll')
+          }
+      }
+    });
+
     const apac = document.querySelector('.apac')[0];
     const apac_overlay = document.querySelector('.apac span');
     const me = document.querySelector('.me')[0];