Merge pull request #19 from DominikNoga/feature/addStickyHeader

Feature/add sticky header
DominikNoga · May 9, 2024 · f708e9d · f708e9d
2 parents d03122b + 2f4585f
commit f708e9d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 4 deletions.
diff --git a/ISD-conference-web-app-frontend/src/app/app.component.html b/ISD-conference-web-app-frontend/src/app/app.component.html
@@ -2,7 +2,6 @@
     <isd-header></isd-header>
     <div class="router-content">
         <router-outlet>
-
         </router-outlet>
     </div>
     <isd-footer></isd-footer>

diff --git a/ISD-conference-web-app-frontend/src/app/app.component.scss b/ISD-conference-web-app-frontend/src/app/app.component.scss
@@ -12,6 +12,7 @@
     }
     .router-content {
         background-color: $white-darker;
+        padding-top: 50px;
         flex: 1;
     }
 }
diff --git a/ISD-conference-web-app-frontend/src/app/components/isd-ui/header/header.component.html b/ISD-conference-web-app-frontend/src/app/components/isd-ui/header/header.component.html
@@ -1,3 +1,4 @@
+<div class = "wrapper" [ngClass]="{'visible': isMenuVisible}" (window:scroll)="onScroll($event)">
 <header class="isd-header" id="top">
     <div class="logo">
         <div class="rectangle"></div>
@@ -14,3 +15,4 @@
     </div>
     <isd-nav></isd-nav>
 </header>
+</div>
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
@@ -1,11 +1,21 @@
 @import '../../../styles/isd-variables.scss';
 @import '../../../styles/isd-mixins.scss';
 
-.isd-header {
+
+.wrapper{
+
+width:100%; //stretch the header so the bar looks okay when scrolling up
+position:fixed;
+z-index: 1; //display header above anything else
+transition: 0.3s ease;
+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);
@@ -44,3 +54,10 @@
     }
 
 }
+}
+
+.visible{
+    visibility:visible;
+    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
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { NavService } from 'src/app/services/nav/nav.service';
 
 @Component({
@@ -15,4 +15,27 @@ export class HeaderComponent implements OnInit {
   displayBurgerNav(): boolean {
     return this.navService.displayBurgerNav();
   }
+
+  isMenuVisible = true;
+  lastScrollTop = 0;
+
+  @HostListener('window:scroll', ['$event'])
+  onScroll(event: Event) {
+    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;
+    }
+
+    this.lastScrollTop = currentScroll;
+  }
+}
 }