Встроенный JavaScript прекратил добавлять класс к элементу

Question

Эй, у меня есть встроенный код javascript, который добавляет класс к элементу и заставляет его скользить вверх по экрану. Но это внезапно перестало работать, и я не знаю почему. Вот HTMl и JS:

 $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 400) {
            $(".converter").addClass("atcbottomactive");
        } else {
            $(".converter").removeClass("atcbottomactive");
        }
    });

.converter {
	position: fixed; 
	height: 60px; 
	width: 100%; 
	bottom: -200; 
	background: #eeeeee; 
	transition: 1s;
	z-index: 10000;
}

.ccontent {
	display: inline-flex;
	width: 100%;
	padding: 10px 5%;
}

.atcbottomactive{
	bottom:0;
	transition: 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background: green; height: 1500px; width: 100%;"></div>
<div class="converter"><div class="ccontent">...</div></div>

Вот ссылка

Заранее спасибо:)

Answer 1

На самом деле, попытка использовать его без включения JQuery выдает ошибку. Вы можете легко решить эту проблему с помощью «JavaScript», не используя 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: 20px 20px 200%;
  background: blue;
  color: white;
}

.converter.atcbottomactive {
  background: green;
}

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