Inline Javascript Stoped Adding Class To Element

Hey I have an inline javascript code that adds a class to an element and makes it slide up in the screen. But it suddenly stopped working and I don't know why. Here's the HTMl and

Solution 1:

In fact, trying to use it without including JQuery gives you the error. You can solve this easily with "JavaScript" without using jQuery.

var element = document.querySelector(".converter");

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

  var scroll = window.pageYOffset || document.documentElement.scrollTop;

  if (scroll >= 400) {
    element.classList.add("atcbottomactive");
  } else {
    element.classList.remove("atcbottomactive");
  }

});

.converter {
  padding: 20px20px200%;
  background: blue;
  color: white;
}

.converter.atcbottomactive {
  background: green;
}

<divclass="converter"><divclass="ccontent">Scroll me: 400px</div></div>