auto
1af614323e
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.
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import {Component, HostListener, Input} from '@angular/core';
|
|
|
|
@Component({
|
|
standalone: false,
|
|
selector: 'app-header',
|
|
templateUrl: './header.component.html',
|
|
styleUrls: ['./header.component.scss']
|
|
})
|
|
export class HeaderComponent {
|
|
@Input() current_page: string = '';
|
|
@Input() background_image: string = '';
|
|
@Input() height: string = '';
|
|
@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 = '';
|
|
}
|
|
}
|
|
|
|
public getBackgroundImage() {
|
|
if (this.overlay_gradient) {
|
|
return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient}), rgba(0, 0, 0, ${this.overlay_gradient})), url(${this.background_image})`;
|
|
} else {
|
|
return `url(${this.background_image})`;
|
|
}
|
|
}
|
|
|
|
|
|
public getCurrentPageId(options: string[]) {
|
|
if (options.includes(this.current_page)) {
|
|
return 'current_page'
|
|
}
|
|
return null;
|
|
}
|
|
}
|