Seeking assistance in adjusting the background color of my header upon scrolling. This is my current implementation:
header.component.ts
export class HeaderComponent {
ngOnInit(): void {
const header = document.querySelector('.header');
document.addEventListener('scroll', (ev) => {
if (header !== null) {
if (window.scrollY === 0) {
header.classList.remove('change-header-background');
return;
}
header.classList.add('change-header-background');
}
});
}
}
header.component.scss
.header {
border-top: 0.5rem solid #000;
position: fixed;
.change-header-background {
background-color: white;
}
}
I have experimented with various suggestions from online resources, but none have yielded successful outcomes so far.