Important HTML Knowledge
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hey there, my name is</div>
<div class="text-2">John Doe</div>
<div class="text-3">And I'm a <span id="headSpan">Coder</span></div>
</div>
</div>
</section>
CSS Requirements
.sticky {
padding: 30px 0;
background-color: crimson;
}
.stickyHeadSpan {
color: #fff;
}
Essential JavaScript Code
window.addEventListener('scroll' , function(){
if(window.scrollY > 20){
const navbar = document.querySelector('.navbar')
const headSpan = document.querySelector('span')
navbar.classList.add('sticky')
headSpan.classList.add('stickyHeadSpan')
}
})
window.addEventListener('scroll' , () => {
if(window.scrollY === 0) {
const navbar = document.querySelector('.navbar')
navbar.classList.remove('sticky')
}
})
I've been struggling to change the span text color to white when scrolling. I tried selecting by ID and even without any identifier but it didn't work. Could there be a rule causing this issue? As a beginner in Javascript, I would appreciate your assistance in fixing this problem.