javascript - 将 Jquery 脚本重写为 vanilla Javascript

Question

我试图用香草 javascript 重写一个我喜欢的 jquery 脚本，但它的进展并不顺利，这是原来的：jquery：

$(window).scroll(function(){
    if ($(window).scrollTop() >= 225) {
        $('.sticky-nav').addClass('fixed-header');
        $('.site-title').addClass('visible-title');
    }
    else {
        $('.sticky-nav').removeClass('fixed-header');
        $('.site-title').removeClass('visible-title');
    }
});

到目前为止，我将其更改为：

window.onscroll = function() {
 if (document.window.scrollTop == 225 || document.documentElement.scrollTop == 225) {
        $('.sticky-nav').addClass('fixed-header');
        $('.site-title').addClass('visible-title');
    }
    else {
        $('.sticky-nav').removeClass('fixed-header');
        $('.site-title').removeClass('visible-title');
    }
}

代码笔： https ://codepen.io/robot_head/pen/WKverK

我不知道如何处理 if 语句，或者如何重写添加和删除类行。这里的一些指示会有所帮助

Answer 1

您可以使用

document.querySelector('.sticky-nav').classList.add()

和

document.querySelector('.sticky-nav').classList.remove()

如果您知道它只有一个匹配的元素（或者如果第一个匹配是您想要的）。

否则document.querySelectorAll请改用，但请注意结果是 a NodeList（即使它只找到一个元素），您必须手动迭代它，例如

let navitems = document.querySelectorAll('.nav-item');
for (let i = 0; i < navitems.length; i++) {
  navitem[i].classList.add('processed');
}