Je suis actuellement dans une impasse j'ai même questionné chatGPT ^^ . Mais il comprend pas vraiment ce que je veux lui dire ou je m'exprime peut être mal ou troisième option je comprend pas forcement ça réponse bref... Je tente ma chance auprès de réel humain

Voila mon problème j'ai injecté une class que j'ai défini dans mon CSS mais qui n'existe pas dans mon HTML.
de la façon suivante .
const fixedCancel = document.getElementsByClassName("test");
console.log(fixedCancel);
window.addEventListener("scroll", () => {
if (window.scrollY > 600) {
for (var i = 0; i < fixedCancel.length; i++) {
fixedCancel.classList.remove("anime");
fixedCancel.classList.add("animPosition");
}
} else {
for (var i = 0; i < fixedCancel.length; i++) {
fixedCancel.classList.remove("animPosition");
fixedCancel.classList.add("anime");
}
}
});
Mais voila quand la hauteur de mon écran change ça ne rend plus pareil donc j'ai écris cette même class fictive dans un media queries pensant que celle ci serait automatiquement prise en compte quand mon écran aurait telle hauteur il injecterait celle du media queries il n'en est rien . quel est la méthode pour faire ce que j'ai envie de faire ?