原生JavaScript中多类名添加/移除的逻辑问题排查

需求说明 #

• 页面存在id为quoteForm的div元素，初始class属性为空
• 滚动规则：向下滚动超过800px时，为元素添加quoteform-fixed类
• 窗口宽度规则：滚动时若窗口宽度小于1670px，为元素添加quoteform-hidden类

初始代码与问题 #

初始实现代码：

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类就会被自动添加，且quoteform-fixed与quoteform-hidden会同时存在于元素上，最终元素结构如下：

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

该问题不受浏览器窗口宽度影响。

更新后的代码与新问题 #

调整后的代码：

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");
  }
}

新问题：窗口宽度大于1670px时功能正常，但宽度小于1670px时，滚动后两个类会同时存在，且滚动回顶部时类不会被移除。

解决方案 #

问题根源在于条件判断逻辑混乱，嵌套的else if导致类的添加/移除规则互相覆盖。正确的做法是将两个条件独立处理，分别控制对应类的状态，同时补充窗口 resize 监听以适配宽度变化场景：

function updateQuoteFormClasses() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const form = document.getElementById('quoteForm');
  const isWindowWide = window.innerWidth >= 1670;

  // 控制quoteform-fixed类：仅当滚动超800px且窗口足够宽时保留
  if (scrollTop > 800 && isWindowWide) {
    form.classList.add('quoteform-fixed');
  } else {
    form.classList.remove('quoteform-fixed');
  }

  // 控制quoteform-hidden类：窗口宽度不足1670时添加，否则移除
  if (window.innerWidth < 1670) {
    form.classList.add('quoteform-hidden');
  } else {
    form.classList.remove('quoteform-hidden');
  }
}

// 绑定滚动与窗口大小变化事件
window.addEventListener('scroll', updateQuoteFormClasses);
window.addEventListener('resize', updateQuoteFormClasses);

// 页面加载时初始化类状态
updateQuoteFormClasses();

代码说明 #

1. 将类控制逻辑抽为独立函数，便于维护与复用
2. 分别处理两个类的添加/移除逻辑，避免条件嵌套冲突
3. 新增窗口 resize 监听，确保宽度变化时类状态自动更新
4. 页面加载时执行一次初始化，保证初始状态符合规则

内容的提问来源于stack exchange，提问作者Phillip Dews