From 1af614323ea079d9adba30fda8d4e3778a3f370e Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sat, 5 Apr 2025 23:18:37 +0200
Subject: [PATCH] Fix header background position logic on scroll

Updated the header's background position calculation to use string concatenation for `inverseYPos` and introduced dynamic adjustment of `inverseYPos` on scroll. This ensures smoother and more accurate background position updates.
---
 frontend/src/app/header/header.component.html | 8 +-------
 frontend/src/app/header/header.component.ts   | 2 ++
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/header/header.component.html b/frontend/src/app/header/header.component.html
index 0f80c4a..e459f18 100644
--- a/frontend/src/app/header/header.component.html
+++ b/frontend/src/app/header/header.component.html
@@ -1,12 +1,6 @@
-
-
-
-
-
-
 <ng-container>
   <header id="top"
-          [ngStyle]="{ 'background-image': getBackgroundImage(), 'height': height, 'background-position': center {{ inverseYPos }}px; }">
+          [ngStyle]="{ 'background-image': getBackgroundImage(), 'height': height, 'background-position': 'center ' + inverseYPos + 'px' }">
     <nav id="nav" [ngClass]="active">
       <div class="container">
         <div id="mobile_nav">
diff --git a/frontend/src/app/header/header.component.ts b/frontend/src/app/header/header.component.ts
index f9ce576..7cf5156 100644
--- a/frontend/src/app/header/header.component.ts
+++ b/frontend/src/app/header/header.component.ts
@@ -13,12 +13,14 @@ export class HeaderComponent {
   @Input() overlay_gradient: number = 0;
 
   public active: string = '';
+  public inverseYPos: number = 0;
 
   @HostListener('window:scroll', [])
   onWindowScroll(): void {
     const scrollPosition = window.scrollY;
     if (scrollPosition > 0) {
       this.active = 'active';
+      this.inverseYPos = (scrollPosition / 4) * -1;
     } else {
       this.active = '';
     }