Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix header background position logic on scroll

Browse Source 
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.
This commit is contained in:
Teriuihi 2025-04-05 23:18:37 +02:00
parent 04c5a3e846
commit 1af614323e
2 changed files with 3 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/header/header.component.html
View File

@ -1,12 +1,6 @@
<ng-container> <ng-container>
<header id="top" <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"> <nav id="nav" [ngClass]="active">
<div class="container"> <div class="container">
<div id="mobile_nav"> <div id="mobile_nav">

2
frontend/src/app/header/header.component.ts
View File

@ -13,12 +13,14 @@ export class HeaderComponent {
@Input() overlay_gradient: number = 0; @Input() overlay_gradient: number = 0;
public active: string = ''; public active: string = '';
public inverseYPos: number = 0;
@HostListener('window:scroll', []) @HostListener('window:scroll', [])
onWindowScroll(): void { onWindowScroll(): void {
const scrollPosition = window.scrollY; const scrollPosition = window.scrollY;
if (scrollPosition > 0) { if (scrollPosition > 0) {
this.active = 'active'; this.active = 'active';
this.inverseYPos = (scrollPosition / 4) * -1;
} else { } else {
this.active = ''; this.active = '';
} }