将 Jquery 脚本重写为 vanilla Javascript

Posted 2023-05-08

【中文标题】将 Jquery 脚本重写为 vanilla Javascript

【英文标题】：rewriting a Jquery script to 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 是做什么的。这是检查用户从页面顶部/开始滚动了多远？

请不要将答案编辑到您的问题中。这使得未来的读者几乎不可能跟随 - 请注意，*** 主要是一个网站，您可以在其中找到问题的答案而无需询问 - 因为其他人提出了类似的问题，您可以使用您的搜索引擎找到答案选择。

要求重写整个脚本是题外话，因为它太宽泛了。问题应该集中，如何实现scrollTop跨浏览器以及如何添加/删除类跨浏览器。如果你搜索这些，你会发现它们已经存在。 ***.com/questions/20106827/… 和 ***.com/questions/26695272/…

【参考方案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');