内联 Javascript 停止向元素添加类

费尔南多

嘿,我有一个内联 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>

这是链接

提前致谢 :)

BOZ

事实上,尝试在不包含 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章