我目前正在从代码中删除jquery，无法将此jquery转换为Javascript

我目前正在从我的网站上删除Jquery，但我无法成功地将其转换为JavaScript。我知道这可能很愚蠢，但我还是个初学者。有人能帮忙吗

$(document).scroll(function(){
    $('.navbar').toggleClass('scrolled', $(this).
    scrollTop() > $('.navbar').height());
});

---

您可以尝试以下方法：

window.onscroll=函数{ var nav=document.querySelector'.navbar'； var iscrowled=document.body.scrollTop>nav.offsetHeight | | document.documentElement.scrollTop>nav.offsetHeight； nav.classList.togglescrolled，isscrowled； }; .集装箱{ 高度：2000px； } .导航链路{ 显示：块； 颜色：红色； } .滚动的.导航链接{ 颜色：蓝色； } 导航栏 aaa bbb ccc

---

第一行可以替换为这样的addEventListener

window.addEventListener('scroll', function (e) {
});

window.addEventListener('scroll', function (e) {
  var navbar = document.getElementById("navbar");
  navbar.classList.remove("scrolled");
  if (this.scrollY > navbar.clientHeight) {
      navbar.classList.add("scrolled");
  }
});

要替换切换函数，可以使用classList属性。将元素保存在新变量中，然后保存element.classList。删除'class'或element.classList。添加'class'

var navbar = document.getElementById("navbar");
navbar.classList.remove("scrolled");
navbar.classList.add("scrolled");

使用this.scrollY获取窗口滚动位置，使用element.clientHeight获取元素（包括填充）的高度还有其他方法可以获取更适合您需要的高度

 if (this.scrollY > navbar.clientHeight) {}

最终结果将是这样的

window.addEventListener('scroll', function (e) {
});

window.addEventListener('scroll', function (e) {
  var navbar = document.getElementById("navbar");
  navbar.classList.remove("scrolled");
  if (this.scrollY > navbar.clientHeight) {
      navbar.classList.add("scrolled");
  }
});

---

一些提示：，或querySelector，方法等。请显示您尝试了什么。我认为如果您只需谷歌滚动事件，classListtoggle documentquerySelector，您就可以相当轻松地完成它，只需阅读相关内容。这不是高级的JS，google也没有坏处。如果我想在另一个类上使用相同的函数呢？有.navbar和.nav link我不确定我是否理解你的问题。我的答案中的示例包含一个匿名函数来处理窗口的滚动事件。你需要什么？我基本上有两次Jquery代码，一次是.navbar，它触发了整个navbar颜色的改变。另一个，.nav link在滚动时更改了导航栏链接的颜色。我想将两者基本上都转换为JavaScription假设.nav链接元素嵌套在.navbar元素中，您可以创建一个CSS规则，当.nav链接元素的父元素包含.scrolled类时，将样式应用于.nav链接元素。请参见更新的示例。