Question

我有一些简单的脚本可以将类添加到依赖于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，但是当我尝试所有代码时没有任何反应。

Answer 1

除非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');
    }
});

classList和scroll事件

1 个答案: