将 Jquery 脚本重写为 vanilla Javascript答案

【问题标题】：rewriting a Jquery script to vanilla Javascript将 Jquery 脚本重写为 vanilla Javascript
【发布时间】：2018-12-20 04:28:12
【问题描述】：

我正在尝试用 vanilla 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');
    }
}

codepen:https://codepen.io/robot_head/pen/WKverK

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

【问题讨论】：

document.querySelector('.sticky-nav').classList.add() 以防您知道它只有一个匹配的元素。否则请改用document.querySelectorAll，但请注意结果是NodeList（您必须手动迭代）。
对 if 语句有什么建议吗？ jquery 一个工作 javascript 一个不工作
window.scrollY 我想这就是你需要的。我不知道 jQuery 是做什么的。这是检查用户从页面顶部/开始滚动了多远？
请不要将答案编辑到您的问题中。这使得未来的读者几乎不可能跟随 - 请注意，Stackoverflow 主要是一个网站，您可以在其中找到问题的答案而无需询问 - 因为其他人提出了类似的问题，您可以使用您的搜索引擎找到答案选择。
要求重写整个脚本是题外话，因为它太宽泛了。问题应该集中，如何实现scrollTop跨浏览器以及如何添加/删除类跨浏览器。如果你搜索这些，你会发现它们已经存在。 stackoverflow.com/questions/20106827/… 和 stackoverflow.com/questions/26695272/…

标签： javascript jquery vanilla-forums

【解决方案1】：

你可以使用

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

和

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

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

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

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

【讨论】：