Tengo un SVG de cheurón en la parte inferior de mi página que quiero ocultar una vez que el usuario se desplaza hacia abajo. No puedo entender por qué mi JS no funciona y el cheurón nunca se oculta:
NOTA: las declaraciones de console.log se ejecutan y la hoja de estilo css funciona.
chevron = document.getElementById("down-accelerate-path"); window.addEventListener("scroll", e => { const y = window.scrollY; if (y >= 1) { console.log(y + " " + chevron) chevron.className = "" chevron.hidden = true; } else { chevron.className = "hide" chevron.hidden = false; } }); body { height: 300vh; } .hide { display: none; } #down-accelerate { position: fixed; top: 88%; transform: translateX(-50%); } <span class="center"> <svg height=88 width=88 viewBox="0 0 444.819 444.819" xmlns="http://www.w3.org/2000/svg" id = "down-accelerate"> <path id="down-accelerate-path" style="" fill="white" stroke="none" d="M434.252,114.203l-21.409-21.416c-7.419-7.04-16.084-10.561-25.975-10.561c-10.095,0-18.657,3.521-25.7,10.561 L222.41,231.549L83.653,92.791c-7.042-7.04-15.606-10.561-25.697-10.561c-9.896,0-18.559,3.521-25.979,10.561l-21.128,21.416 C3.615,121.436,0,130.099,0,140.188c0,10.277,3.619,18.842,10.848,25.693l185.864,185.865c6.855,7.23,15.416,10.848,25.697,10.848 c10.088,0,18.75-3.617,25.977-10.848l185.865-185.865c7.043-7.044,10.567-15.608,10.567-25.693 C444.819,130.287,441.295,121.629,434.252,114.203z"/> </svg> </span>Su código parece estar funcionando. Pero no pude ver el galón. Así que lo hice negro y cambié su posición para probar. También limpié un poco el código.
chevron = document.getElementById("chevron"); window.addEventListener("scroll", e => { const y = window.scrollY; if (y >= 1) { chevron.className = 'hide' } else { chevron.className = '' } }); body { height: 300vh; } .hide { display: none; } #down-accelerate { position: fixed; right: 50%; } <span class="center" id="chevron"> <svg height=88 width=88 viewBox="0 0 444.819 444.819" xmlns="http://www.w3.org/2000/svg" id = "down-accelerate"> <path id="down-accelerate-path" style="" fill="black" stroke="none" d="M434.252,114.203l-21.409-21.416c-7.419-7.04-16.084-10.561-25.975-10.561c-10.095,0-18.657,3.521-25.7,10.561 L222.41,231.549L83.653,92.791c-7.042-7.04-15.606-10.561-25.697-10.561c-9.896,0-18.559,3.521-25.979,10.561l-21.128,21.416 C3.615,121.436,0,130.099,0,140.188c0,10.277,3.619,18.842,10.848,25.693l185.864,185.865c6.855,7.23,15.416,10.848,25.697,10.848 c10.088,0,18.75-3.617,25.977-10.848l185.865-185.865c7.043-7.044,10.567-15.608,10.567-25.693 C444.819,130.287,441.295,121.629,434.252,114.203z"/> </svg> </span>