在香草javascript中添加和删除多个类

Question

我有一个简单的div, id为#quoteForm和一个空类，根据两个单独的条件即滚动条件和内宽条件填充2个不同的类。

基本上我想要发生的是，div类名。quoteform-fixed后滚动页面，然后类名。quoteform-hidden添加后滚动，但innerWidth为1670px。

这是我在香草javascript中提出的…

window.onscroll = function(){
var top = window.pageYOffset || document.documentElement.scrollTop;
var form = document.getElementById('quoteForm');
if (top > 800) {
form.classList.add("quoteform-fixed");
} else if (top > 800 || window.innerWidth < 1670) {
form.classList.add("quoteform-hidden");
form.classList.remove("quoteform-fixed");
} else {
form.classList.remove("quoteform-hidden");
form.classList.remove("quoteform-fixed");
}
}

当我滚动时。quoteform-hidden会自动添加第二个类也会添加到div中所以滚动后它看起来是这样的。

<div id="quoteForm" class="quoteform-hidden quoteform-fixed"></div>

无论浏览器的宽度大小如何，都会发生这种情况。什么好主意吗?

更新。

我稍微想了一下，就快到了。在宽度超过1670px的浏览器窗口中，javascript添加了类名。quoteform-fixed，当然，当我滚动到顶部时，会删除该类。

发生的问题是，当我把浏览器窗口缩小到1670px以下，因为当我滚动。quoteform-hidden立即被添加，然后当我滚动一些。quoteform-fixed也被添加，当我滚动到顶部时，两者都保持填充。

这是我的新代码…

window.onscroll = function(){
var top = window.pageYOffset || document.documentElement.scrollTop;
var form = document.getElementById('quoteForm');
if (top > 800) {
form.classList.add("quoteform-fixed");
} else if (innerWidth < 1670 || top > 800) {
form.classList.add("quoteform-hidden");
} else {
form.classList.remove("quoteform-fixed");
form.classList.remove("quoteform-hidden");
}
}

Answer 1

看起来我用这个修复了它…

window.onscroll = function(){
var top = window.pageYOffset || document.documentElement.scrollTop;
var form = document.getElementById('quoteForm');
if (top > 800 && innerWidth < 1670) {
form.classList.add("quoteform-hidden");
} else if (top > 800) {
form.classList.add("quoteform-fixed");
form.classList.remove("quoteform-hidden");
} else {
form.classList.remove("quoteform-fixed");
form.classList.remove("quoteform-hidden");
}
}