请教：我的JavaScript滚动隐藏导航栏代码是否冗余重复？

你的判断完全正确，这段代码确实存在冗余，不符合DRY（Don't Repeat Yourself）原则，完全可以优化得更简洁、易维护。

问题分析 #

当前代码在if-else分支里重复执行classList.add和classList.remove操作，本质上是根据滚动位置切换两个类的状态，这种重复的类操作完全可以简化。另外，原代码里的scrollPosition变量其实是多余的——每次滚动时直接读取window.scrollY即可，不需要额外存储。

优化方案1：利用classList.toggle的布尔参数 #

classList.toggle支持第二个布尔参数：当参数为true时添加类，为false时移除类，刚好可以用来替代分支判断里的重复操作：

const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', function() {
  const shouldHide = window.scrollY >= 600;
  navbar.classList.toggle('is-hidden', shouldHide);
  navbar.classList.toggle('is-visible', !shouldHide);
});

优化方案2：简化类的维护（推荐） #

如果你的CSS中默认导航栏是可见状态（即is-visible是默认样式），那其实不需要维护is-visible类，只需要在滚动到阈值时添加/移除is-hidden类即可，代码会更精简：

const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', function() {
  navbar.classList.toggle('is-hidden', window.scrollY >= 600);
});

这样既保留了核心功能，又彻底消除了冗余代码，逻辑也更清晰。

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