Merge pull request #18 from frc9611/feat-Changes

Feat Changes
frc9611 · Feb 12, 2024 · ee5e941 · ee5e941
2 parents 9d6b42d + 7d85a72
commit ee5e941
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 16 deletions.
diff --git a/src/about-us.html b/src/about-us.html
@@ -25,7 +25,7 @@
 </head>
 
 <body>
-    <header class="header modded-header">
+    <header class="header hideable-header">
         <a class="cr-info-wrapper" href=".">
             <img src="./assets/cr-header-logo.png" alt="Logo da CyberRain" class="logo">
             <div class="team-name-wrapper">

diff --git a/src/index.html b/src/index.html
@@ -25,7 +25,7 @@
 </head>
 
 <body>
-    <header class="header">
+    <header class="header hideable-header">
         <a class="cr-info-wrapper" href=".">
             <img src="./assets/cr-header-logo.png" alt="Logo da CyberRain" class="logo">
             <div class="team-name-wrapper">

diff --git a/src/javascripts/disable-scroll.js b/src/javascripts/disable-scroll.js
@@ -12,3 +12,31 @@ function disableScroll() {
 function enableScroll() {
     window.onscroll = function() {};
 }
+
+let preScroll = 0;
+let contador = 0;
+window.addEventListener('scroll', () => {
+    const header = (document.querySelector(".hideable-header")).classList;
+
+    let thisScroll = window.scrollY;
+
+    if(contador == 10) {
+        contador = 0;
+        preScroll = thisScroll;
+    }
+
+    if(window.scrollY > 50) {
+        if (thisScroll === preScroll) return;
+        if (thisScroll > preScroll) {
+            if(!header.contains('scrollHide')) {
+                header.add('scrollHide');
+            }
+        } else {
+            if(header.contains('scrollHide')) {
+                header.remove('scrollHide');
+            }
+        }
+    }
+
+    contador++;
+});
diff --git a/src/styles/about-us.css b/src/styles/about-us.css
@@ -120,13 +120,6 @@
     padding: 25rem 0;
 }
 
-.cr-info-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 4rem;
-}
-
 .logo-wrapper {
     background-color: var(--cr-purple);
     border-radius: 50%;

diff --git a/src/styles/components/layout.css b/src/styles/components/layout.css
@@ -23,12 +23,25 @@
 /* Header */
 
 .header {
+    transition: top 0.2s ease-out;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     background-color: var(--cr-purple);
     padding: 0 8rem;
+    top: 0;
+    left: 0;
+    z-index: 50;
+    height: 30rem;
+}
+
+.header.scrollHide {
+    top: -30rem;
+}
+
+.hideable-header {
+    position: sticky;
 }
 
 .cr-info-wrapper {

diff --git a/src/styles/global/normalize.css b/src/styles/global/normalize.css
@@ -31,13 +31,7 @@
 
 /* Calibrations of default styles */
 
-/* header {
-    position: sticky;
-    top: 0;
-    z-index: 50;
-} */
-
-main {
+main { 
     height: fit-content;
     min-height: 100vh;
 }