fix header not turning dark on scroll

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%;

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];