Estoy tratando de agregar (no reemplazar) una clase a varios elementos cuando me desplazo hacia abajo 10px. Necesito apuntar a múltiples ID en algún HTML que no tengo forma de cambiar . Sin embargo, estos elementos comparten algunas clases, así que pensé que podría apuntar a uno de esos en su lugar.
Cuando uso getElementById, funciona bien y agrega una clase a una sola ID. Si uso getElementsbyClassName o querySelectorAll para apuntar a una clase, no funcionará.
Este funciona:
tabs = document.getElementById("intro"); scrollFunc = function() { var y = window.scrollY; if (y >= 10) { tabs.classList.add("scrollNav"); } else { tabs.classList.remove("scrollNav"); } }; window.addEventListener("scroll", scrollFunc);Este no:
tabs = document.getElementsByClassName("navTabs"); scrollFunc = function() { var y = window.scrollY; if (y >= 10) { tabs.classList.add("scrollNav"); } else { tabs.classList.remove("scrollNav"); } }; window.addEventListener("scroll", scrollFunc);Debe recorrer cada elemento de la colección que devuelve getElementsByClassName .
Probar:
tabs = document.getElementsByClassName("navTabs"); scrollFunc = function() { var y = window.scrollY; if (y >= 10) { [...tabs].forEach((tab) => { tab.classList.add("scrollNav"); }); } else { [...tabs].forEach((tab) => { tab.classList.remove("scrollNav"); }); } }; window.addEventListener("scroll", scrollFunc); Según MDN, getElementsByClassName devuelve una "Colección HTML"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection que por sí sola no tiene un método forEach. Puede usar la sintaxis extendida ... para agregar cada elemento de la colección en una nueva matriz [] que tiene un método forEach.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
document.getElementsByClassName devuelve una HTMLCollection . El atributo classList existe solo en elementos individuales. Por otro lado, getElementById devuelve un elemento.
Para cambiar la lista de clases de cada elemento de la colección, debe convertirla en una matriz y luego recorrer cada elemento en ella. Vea abajo:
tabs = [...document.getElementsByClassName("navTabs")]; scrollFunc = function() { var y = window.scrollY; if (y >= 10) { tabs.forEach(tab => tab.classList.add("scrollNav")); } else { tabs.forEach(tab => tab.classList.remove("scrollNav")); } }; window.addEventListener("scroll", scrollFunc);Este código usa ES6; podría convertirlo fácilmente a una versión más compatible con el navegador.
Recursos Relacionados:
document.getElementsByClassName("navTabs")document.getElementById("intro")[...document.getElementsByClassName("navTabs")]tab => tab.classList.add("scrollNav")