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

Question

我目前正在从我的网站中删除 Jquery，但我无法将其成功转换为 JavaScript。我知道它可能非常愚蠢，但我仍然是初学者。有人可以帮忙吗？

$(document).scroll(function(){

    $('.navbar').toggleClass('scrolled', $(this).

    scrollTop() > $('.navbar').height());

});

Answer 1

你可以尝试这样的事情：window.onscroll = function() {&nbsp; var nav = document.querySelector('.navbar');&nbsp; var isScrolled = document.body.scrollTop > nav.offsetHeight || document.documentElement.scrollTop > nav.offsetHeight;&nbsp; nav.classList.toggle("scrolled", isScrolled);};.container {&nbsp; height: 2000px;}.nav-link {&nbsp; display: block;&nbsp; color: red;}.scrolled .nav-link {&nbsp; color: blue;}<div class="container">&nbsp; <div class="navbar">&nbsp; &nbsp; Navbar&nbsp; &nbsp; <a class="nav-link">aaa</a>&nbsp; &nbsp; <a class="nav-link">bbb</a>&nbsp; &nbsp; <a class="nav-link">ccc</a>&nbsp; </div></div>我们订阅了窗口的onscroll事件。我们使用 获取对您的导航栏元素的引用document.querySelector()。然后我们使用那个元素 height ( offsetHeight) 来确定它是否应该有这个.scrolled类。最后，我们toggle()在导航栏元素的classList属性上使用该方法。根据评论更新：如果必须有许多单独的函数来处理同一事件，最好使用window.addEventListener()语法。window.addEventListener('scroll', function() {&nbsp; var nav = document.querySelector('.navbar');&nbsp; var isScrolled = document.body.scrollTop > nav.offsetHeight || document.documentElement.scrollTop > nav.offsetHeight;&nbsp; nav.classList.toggle("scrolled", isScrolled);});window.addEventListener('scroll', function() {&nbsp; // ...&nbsp; console.log('scroll b');});window.addEventListener('scroll', function() {&nbsp; // ...&nbsp; console.log('scroll c');});.container {&nbsp; height: 2000px;}<div class="container">&nbsp; <div class="navbar">Navbar</div></div>

Answer 2

第一行可以用这样的“addEventListener”替换window.addEventListener('scroll', function (e) {});要替换切换功能，您可以使用“classList”属性。将元素保存在一个新变量中，然后 "element.classList.remove('class')" 或 "element.classList.add('class')var navbar = document.getElementById("navbar");navbar.classList.remove("scrolled");navbar.classList.add("scrolled");使用 this.scrollY 获取窗口 ScrollY 位置，使用 element.clientHeight 获取元素的高度，包括填充（还有其他方法可以获取更适合您需求的高度）&nbsp;if (this.scrollY > navbar.clientHeight) {}最终结果将是这样的window.addEventListener('scroll', function (e) {&nbsp; var navbar = document.getElementById("navbar");&nbsp; navbar.classList.remove("scrolled");&nbsp; if (this.scrollY > navbar.clientHeight) {&nbsp; &nbsp; &nbsp; navbar.classList.add("scrolled");&nbsp; }});