需要知道的 HTML

<section>
            <div>
                <div>
                    <div>Hello, my name is</div>
                    <div>Hadi Zouhbi</div>
                    <div>And I'm a <span>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 的初学者，所以我希望你能帮我解决这个问题。

回答

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>
  <section>
          <div>
              <div>
                  <div>Hello, my name is</div>
                  <div>Hadi Zouhbi</div>
                  <div>And I'm a <span>Developer</span></div>
              </div>
          </div>
  </section>
</div>