为什么我的跨度在滚动时不改变颜色

Question

需要知道的 HTML

<section class="home" id="home">
            <div class="max-width">
                <div class="home-content">
                    <div class="text-1">Hello, my name is</div>
                    <div class="text-2">Hadi Zouhbi</div>
                    <div class="text-3">And I'm a <span id="headSpan">Developer</span></div>
                </div>
            </div>
        </section>

这是所需的CSS

.sticky {
  padding: 30px 0;
  background-color: crimson;
}

.stickyHeadSpan {
  color: #fff;
}

这是所需的javascript代码

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')
    }
})

我尝试通过 id 获取跨度但仍然没有用，每当我向下滚动跨度时，跨度不会将颜色更改为白色，我是不是在某处犯了错误？ 我也试过只使用跨度，所以没有 id 或 class，但它仍然不起作用，这真的很奇怪。 是否有任何规则使这不起作用？ 我是 Javascript 的初学者，所以我希望你能帮我解决这个问题。

Answer 1

 window.addEventListener('scroll', function() { if (window.scrollY > 20) { const navbar = document.querySelector('.home'); const headSpan = document.querySelector('span'); navbar.classList.add('sticky'); headSpan.classList.add('stickyHeadSpan'); } }) window.addEventListener('scroll', () => { if (window.scrollY === 0) { const navbar = document.querySelector('.home') navbar.classList.remove('sticky') } })

 .wrapper{ height: 200vh; } .sticky { padding: 30px 0; background-color: crimson; position: sticky; top: 0; left: 0; } .stickyHeadSpan { color: #fff; }

 <div class="wrapper"> <section class="home" id="home"> <div class="max-width"> <div class="home-content"> <div class="text-1">Hello, my name is</div> <div class="text-2">Hadi Zouhbi</div> <div class="text-3">And I'm a <span id="headSpan">Developer</span></div> </div> </div> </section> </div>