ヘッダーにクラスを追加するには、このコードで何が問題になりますか？

Question

このコードで私を助けることができますか？それは作業イマイチなぜ...

function init() { 
    window.addEventListener('scroll', function(e) { 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
      shrinkOn = 10, 
      header = document.querySelector("header"); 
     if(distanceY > shrinkOn) { 
      classie.add(header, "is-not-top"); 
      classie.remove(header, "is-top"); 
     } else { 
      if(classie.has(header, "is-not-top")) { 
       classie.remove(header, "is-not-top"); 
       classie.add(header, "is-top"); 
      } 
     } 
    }); 
} 
window.onload = init(); 

を見つける傾けるこれは、クラスを追加する必要があり、ヘッダクラスに-ないトップであるが、それはこれを行うdoesntの...いただきましたの？ THX：D

EDIT：window.onload = initように、name、name()ないことによってそれを参照し、

Answer 1

 function init() { 
window.addEventListener('scroll', function(e){ 
    var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
     shrinkOn = 10, 
     header = document.getElementById("header"); 
    if (distanceY > shrinkOn) { 
     header.classList.add("is-not-top"); 
     header.classList.remove("is-top"); 
    } else { 
     if (header.classList.has("is-not-top")) { 
      header.classList.remove("is-not-top"); 
      header.classList.add("is-top"); 
     } 
    } 
}); 
} 
window.onload = init; 

まずオフ、コールバックを設定： のにコードを変更しました。

header = document.querySelector("header"); 

まず、querySelectorは1つの要素を選択します。 querySelectorAllは、JQueryのような一致する要素をすべて選択します。第二に、wordは<word>要素をそれ自身で検索します。 <div class="word">要素を検索する場合は、.wordを問い合わせてください。

したがって、新しい行は次のようになります。

header = document.querySelectorAll(".header"); 

私は前にそれを使用していないので、classieは、NodeLists上で動作できることを前提としています。