Hey there, I've been working on adding a background color change to my navbar when the scrollY exceeds 30px, and it's functioning properly. However, I'm encountering an error in the console which states that the new classList cannot be added to the header once it surpasses 30px.
This is how my .ts file looks like:
ngOnInit(): void {
function scrollHeader(){
const nav = document.getElementById('header');
if(window.scrollY >= 30){
nav.classList.add('scroll-header');
}else{
nav.classList.remove('scroll-header');
}
}
window.addEventListener('scroll', scrollHeader);
}
Here is the styling in my style sheet:
.scroll-header{
background: #242526;
color: white;
}
.scroll-header .wrapper .logo a{
color:white;
}
And this is the content of my HTML File:
<nav id="header">
<div class="wrapper">
<div class="logo">
<a [routerLink]="'/'">InsuranceBazaar</a>
</div>
<input type="radio" name="slider" id="menu-btn">
<input type="radio" name="slider" id="close-btn">
<ul class="nav-links">
<label for="close-btn" class="btn close-btn">
<i class="fa fa-times"></i>
</label>
<li>
....
If you have any insights on how to resolve this issue possibly related to ngOnInit(), please share them with me. Your help would be greatly appreciated!