CSS (прокрутка): почему нельзя основать команду на имени класса вместо id?

Question

Я хотел сделать topbar, реагирующий на прокрутку на сайте.

Я использовал эту команду:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
//    SMALL!!
    document.getElementById("logo_nav_bar").style.height = " 100px";    
}  
//  BIG!!
   else {
    document.getElementById("logo_nav_bar").style.height = "160px";
}

Вопрос : мне всегда нужно использовать getElementById? потому что getElementsByClassName не работает, и я хотел бы применить эту команду ко всему классу.

Answer 1

Предполагая, что мы не используем jQuery, вы можете попробовать следующее: Замените className вашим классом и измените требуемый атрибут, я изменил цвет для образца.

function scrollFunction() {
   if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
      //    SMALL!!
      var elements = document.getElementsByClassName("className");
      for(let i=0; i<elements.length; i++) {
          elements[i].style.color = "yellow";
      }
   }  
//  BIG!!
   else {
    var elements = document.getElementsByClassName("className");
    for(let i=0; i<elements.length; i++) {
        elements[i].style.color = "red";
    }
}