I am currently removing jquery from my code and I am not able to convert this Jquery to Javascript

Question

I am currently removing the Jquery from my website but i am not able to successfully convert it to JavaScript. I know its probably very stupid but i am still a beginner. Could anyone help?

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

Answer 1

You can try something like this:

 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>

We're subscribing to the window's onscroll event. We grab a reference to your navbar element using document.querySelector() . Then we use that elements height ( offsetHeight ) to determine if it should have the .scrolled class. Finally, we use the toggle() method on the navbar element's classList property.

UPDATE based on comments:

If you must have many separate functions to handle the same event, you're better off using the window.addEventListener() syntax.

 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

The first line can be replaced it with an "addEventListener" like this

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

to replace the toggle function you can use the "classList" property. Save the element in a new variable and then "element.classList.remove('class')" or "element.classList.add('class')

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

Use this.scrollY to get the window ScrollY position, and element.clientHeight to get the height of the element including paddings (there are others methods to get the height that can fit more to your needs)

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

The end result will be something like this

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