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

Question

我目前正在从我的网站中删除 Jquery，但我无法将其成功转换为 JavaScript。我知道它可能非常愚蠢，但我仍然是初学者。有人可以帮忙吗？$(document).scroll(function(){    $('.navbar').toggleClass('scrolled', $(this).    scrollTop() > $('.navbar').height());});

Answer 1

你可以尝试这样的事情：

window.onscroll = function() {

  var nav = document.querySelector('.navbar');

  var isScrolled = document.body.scrollTop > nav.offsetHeight || document.documentElement.scrollTop > nav.offsetHeight;

  nav.classList.toggle("scrolled", isScrolled);

};

.container {

  height: 2000px;

}

.nav-link {

  display: block;

  color: red;

}

.scrolled .nav-link {

  color: blue;

}

<div class="container">

  <div class="navbar">

    Navbar

    <a class="nav-link">aaa</a>

    <a class="nav-link">bbb</a>

    <a class="nav-link">ccc</a>

  </div>

</div>

我们订阅了窗口的onscroll事件。我们使用 获取对您的导航栏元素的引用document.querySelector()。然后我们使用那个元素 height ( offsetHeight) 来确定它是否应该有这个.scrolled类。最后，我们toggle()在导航栏元素的classList属性上使用该方法。

根据评论更新：

如果必须有许多单独的函数来处理同一事件，最好使用window.addEventListener()语法。

window.addEventListener('scroll', function() {

  var nav = document.querySelector('.navbar');

  var isScrolled = document.body.scrollTop > nav.offsetHeight || document.documentElement.scrollTop > nav.offsetHeight;

  nav.classList.toggle("scrolled", isScrolled);

});

window.addEventListener('scroll', function() {

  // ...

  console.log('scroll b');

});

window.addEventListener('scroll', function() {

  // ...

  console.log('scroll c');

});

.container {

  height: 2000px;

}

<div class="container">

  <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 获取元素的高度，包括填充（还有其他方法可以获取更适合您需求的高度）

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

最终结果将是这样的

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

  var navbar = document.getElementById("navbar");

  navbar.classList.remove("scrolled");

  if (this.scrollY > navbar.clientHeight) {

      navbar.classList.add("scrolled");

  }

});