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 @@
- + Regional Rumble APAC Logo
- + Regional Rumble MENA Logo
- + Regional Rumble SSA Logo
@@ -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];