为什么使用window.scrollTop的JS代码无法成功添加stuck-md类？

问题根因 #

• 条件判断的优先级顺序写反：scrollTop >= 430的成立前提必然满足scrollTop >= 285，当滚动距离超过430时，会优先命中第一个if分支逻辑，直接添加stuck-sm类，永远不会进入else if的判断分支，所以stuck-md类始终无法被添加。
• 原有逻辑存在附加问题：就算调整判断顺序，原写法也会出现滚动到430以上时stuck-sm类没有被移除的问题，两个类会同时存在，不符合滚动分段切换类的常规预期。

修复后代码示例 #

// 预先获取滚动距离，避免重复调用$(window).scrollTop()造成不必要的性能损耗
const scrollTop = $(window).scrollTop()
if (scrollTop >= 430) {
  // 可根据业务需求决定是否同时保留stuck-sm类，以下为分段互斥切换类的写法
  $('.something').removeClass('stuck-sm').addClass('stuck-md')
} else if (scrollTop >= 285) {
  $('.something').removeClass('stuck-md').addClass('stuck-sm')
} else {
  $('.something').removeClass('stuck-sm stuck-md')
}

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