rewritten the code a bit

DominikNoga · May 8, 2024 · 2f4585f · 2f4585f
1 parent f626458
commit 2f4585f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 16 deletions.
diff --git a/ISD-conference-web-app-frontend/src/app/components/isd-ui/header/header.component.scss b/ISD-conference-web-app-frontend/src/app/components/isd-ui/header/header.component.scss
@@ -4,21 +4,18 @@
 
 .wrapper{
 
-    //the code is quite messed up...
-
-width:100%;
+width:100%; //stretch the header so the bar looks okay when scrolling up
 position:fixed;
-top:0px;
-z-index: 1;
+z-index: 1; //display header above anything else
 transition: 0.3s ease;
-visibility: hidden;
-top: -100px;
+visibility: hidden; //by default, the header is invisible, the .visible class handles making it visible
+top: -100px; 
+background-color: $white-darker;
 
 .isd-header {  
     $logo-size: 70px;
     $padding-value: 4em;
     @include simpleFlexLayout($direction: row, $gap: 0);
-    //position: relative;
 
     .logo {
         @include simpleFlexLayout($direction: row, $gap: 0);
@@ -60,10 +57,7 @@ top: -100px;
 }
 
 .visible{
-    opacity: 1; 
-    background-color: $white-darker;
-    position: fixed;
     visibility:visible;
-    top: -0px
+    top: 0px 
 }
 
diff --git a/ISD-conference-web-app-frontend/src/app/components/isd-ui/header/header.component.ts b/ISD-conference-web-app-frontend/src/app/components/isd-ui/header/header.component.ts
@@ -24,18 +24,17 @@ export class HeaderComponent implements OnInit {
     let currentScroll = window.scrollY ;
     let delta = 5;
 
-
+    //debonce the scroll
   if(Math.abs(this.lastScrollTop - currentScroll) >= delta){
+    //if scrolling up, or if the user is on the top of the page show the header
     if (currentScroll >= this.lastScrollTop && window.scrollY > 70) {
       // Scrolling down
       this.isMenuVisible = false;
     } else {
       // Scrolling up
       this.isMenuVisible = true;
     }
-    console.log("Current scroll:", currentScroll)
-    console.log("LastScrollTop: ", this.lastScrollTop)
-
+
     this.lastScrollTop = currentScroll;
   }
 }