WIP changes on nav to finalise

fablabbcn · Sep 6, 2024 · 0107b67 · 0107b67
1 parent 0b87523
commit 0107b67
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/app/components/landing/landing.html b/src/app/components/landing/landing.html
@@ -260,4 +260,20 @@ <h3>JOIN THE<br>FORUM</h3>
     window.scrollTo(0, parseInt(scrollY || '0') * -1);
   }
 
+  // When the user scrolls the page, execute myFunction
+  window.onscroll = function() {myFunction()};
+
+  // Get the offset position of the navbar
+  var sticky = navGeneral.offsetTop;
+
+  // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
+  // TODO - FINISH SO THAT WHEN SCROLLING GOES TO HAMBURGER ON THE SIDE only ON BIG SCREEN
+  function myFunction() {
+    if (window.scrollY >= sticky) {
+      navGeneral.classList.add("lighter");
+    } else {
+      navGeneral.classList.remove("lighter");
+    }
+  }
+
 </script>
diff --git a/src/app/components/landing/landing.scss b/src/app/components/landing/landing.scss
@@ -26,6 +26,7 @@ body.active {
 .hamburger {
   display: none;
 }
+
 .navigation {
   display: flex;
   flex-direction: row;
@@ -107,19 +108,28 @@ body.active {
   //   justify-content: center;
   //   background-color: $off_black;
   // }
-  .sc-off-cta-platform{
-    position: absolute;
+  .sc-off-cta-platform {
+    position: fixed;
+    top: 0;
     z-index: 3;
     display: flex;
     flex-direction: row;
     flex-wrap:nowrap;
     padding: 6px 10%;
-    width: 80%;
+    width: 78%;
     justify-content: space-between;
     align-items: center;
     background-color: $off_black;
     // max-width: 1200px;
+    margin: 10px 1%;
+    border-radius: 5px;
   }
+
+  .lighter{
+    max-width: 10%;
+    transition: 1s ease-in-out;
+  }
+
   .landing-menu {
     display: flex;
     flex-direction: row;