Добавление одного класса на несколько элементов в операторе if / else

Question

У меня есть скрипт, который добавляет или удаляет класс для нескольких div в зависимости от позиции прокрутки.Это работает отлично, как есть.

window.addEventListener('scroll', function() {
  var sp = window.pageYOffset || document.documentElement.scrollTop;
  var logo = document.querySelector(".logo");
  var btn = document.querySelector(".toggle-label");

  if (sp > 100) {
    logo.classList.add("fade-out");
    btn.classList.add("fade-out");
  } else {
    logo.classList.remove("fade-out");
    btn.classList.remove("fade-out");
  }
});

Но я недавно натолкнулся на другой скрипт, который достигает того же самого более красноречивым / современным способом.(использование функций let, const & arrow.)

И я просто пытаюсь узнать, как я могу добавить / удалить класс для нескольких div в этом современном сценарии.

let scrollpos = window.scrollY
const logo = document.querySelector(".logo")
const logo_height = 400

const add_class_on_scroll = () => logo.classList.add("fade-out")
const remove_class_on_scroll = () => logo.classList.remove("fade-out")


window.addEventListener('scroll', function() {
  scrollpos = window.scrollY;

  if (scrollpos >= logo_height) {
    add_class_on_scroll()
  } else {
    remove_class_on_scroll()
  }
})

IЯ начал с попытки использовать массив следующим образом.

var fade = [logo, toggle-label];


fade.forEach(function(el) {
  el.classList.add("fade-out")
})

Но я застрял на том, как включить этот массив в оператор if / else.Я просто не могу обернуться вокруг него.

Кстати, я не застрял в использовании массива.Я просто пытаюсь понять, как это можно сделать любым разумным способом.

Любая помощь будет принята с благодарностью.

Answer 1

Не все браузеры поддерживают функции LET и / или ARROW!Ваш подход с forEach не совсем правильный.

fade.forEach( function(one_fade_id){
  document.querySelect( '#'+ one_fade_id ).classList.add( "fade-out" )
} )

или

fade.forEach( (fadeId) => { 
  document.querySelect( '#'+ fadeId ).classList.add( "fade-out" ) 
} )

Answer 2

Просто замените их на место, где вы добавляете и удаляете свои классы:

let scrollpos = window.scrollY
var elements = [document.querySelector(".logo"), document.querySelector(".toggle-label")];  // get your elements
const logo_height = 400

const add_class_on_scroll = () => {
  elements.forEach(function(el) {         // loop to add class
    el.classList.add("fade-out");
  });
};
const remove_class_on_scroll = () => {
  elements.forEach(function(el) {         // loop to remove class
    el.classList.remove("fade-out");
  });
};

window.addEventListener('scroll', function() {
  scrollpos = window.scrollY;

  if (scrollpos >= logo_height) {
    add_class_on_scroll()
  } else {
    remove_class_on_scroll()
  }
});