内联Javascript停止将类添加到元素 [英] Inline Javascript stoped adding class to element

问题描述

嘿，我有一个嵌入式javascript代码，该代码将一个类添加到元素中，并使它在屏幕中向上滑动.但是它突然停止工作了，我不知道为什么.这是HTMl和JS:

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 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>

这是链接

先谢谢您了:)

推荐答案

实际上，尝试不包含JQuery来使用它会给您错误.您可以使用"JavaScript"轻松解决此问题，而无需使用jQuery.

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: 20px 20px 200%;
  background: blue;
  color: white;
}

.converter.atcbottomactive {
  background: green;
}

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

这篇关于内联Javascript停止将类添加到元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！