javascript - classList和滚动事件

我有一些简单的脚本可以依靠pageYOffset将类添加到导航栏中：

  var navContainer = document.querySelector('.nav-container');
  var firstTitle = document.querySelector('.first-title')
  document.addEventListener('scroll',function(){
      if(window.pageYOffset < 75){
          navContainer.classList.remove('nav-action','yellow');
      }else if(window.pageYOffset > 75){
          navContainer.classList.add('nav-action')
      }else if(window.pageYOffset<firstTitle.offsetTop){
          navContainer.classList.remove('yellow');
      }
      else if(window.pageYOffset > firstTitle.offsetTop){
          navContainer.classList.add('yellow');
      };
    });

我的麻烦是，当window.pageYOffset大于firstTitle.offsetTop时，满足了最后一个条件，在控制台的方括号之间写入此行将返回true，但是当我尝试所有这些代码时什么也没发生。

最佳答案

除非window.pageYOffset === 75，否则实际上不会执行任何这些行。先前的条件已经涵盖所有情况。

我建议分别对待nav-action和yellow：

var navContainer = document.querySelector('.nav-container');
var firstTitle = document.querySelector('.first-title')
document.addEventListener('scroll', function() {
    if (window.pageYOffset < 75) {
        navContainer.classList.remove('nav-action');
    } else {
        navContainer.classList.add('nav-action')
    }

    if (window.pageYOffset < firstTitle.offsetTop) {
        navContainer.classList.remove('yellow');
    } else {
        navContainer.classList.add('yellow');
    }
});