Как в js добавить id и стили?

Question

[Za Za]

Есть код который скрывает хедер при прокрутке
нужно в этот код добавить еще несколько различных id и смену стилей при этой же прокрутке

var oldScrollY = 0;
 var div = document.getElementById("fixedDiv");

 window.onscroll = function() {
   var scrolled = window.pageYOffset || document.documentElement.scrollTop;
   var dY = scrolled - oldScrollY;
  
   if ( dY > 0 ){
     div.className = "fixed fixed-bottom";
  } else {
    div.className = "fixed fixed-top";
   }

  oldScrollY = scrolled;
}

чет тупое добавление не работает, как и копипаст всего кода и замена в нем (выполняется при этом только последний)

Answer 1

[yarnstart]

Приложите код, где вы пытаетесь добавить id и стили, либо вы что-то не так делаете, либо забыли очистить кэш (нажать ctrl + f5)

Comments

[Za Za]

так все работает
нужно сделать еще один(два-десять) див, чтоб при скролле к новым дивам добавлялись другие классы

[Za Za]

как добавить еще один id="fixedDiv222" с .fixed-top222 .fixed-bottom222

[yarnstart]

Михаил Лебедев,

1. Обновил код в своем примере
   
2. Странная задача у вас, зачем вам несколько плавающих шапок на странице ?
   
3. id лучше вообще не использовать, для чего он вам ? Лучше использовать классы
   
4. В вашем случае нужно заменить getElementById на querySelectorAll, а потом пройти циклом по всем элементам (условно для нескольких шапок)
   
5. Если вам нужно добавлять разные классы и стили к каждому элементу - делайте отдельный селектор под каждый из них, как в ответе снизу
   
6. Разберитесь, что такое id, class и немного подучите, как работает поиск по странице https://learn.javascript.ru/searching-elements-dom
   

[Za Za]

на странице разные дивы которые должны при скролле вниз/вверх вести себя по разному (css)

спасибо - ваш код тоже дал мыслей для размышлений