I have a chevron SVG at the bottom of my page that I want to hide once the user scrolls down. I can't figure out why my JS isn't working and the chevron is never hidden:
NOTE: the console.log statements do run and the css stylesheet does work.
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>Your code appears to be working. But I couldn't see the chevron. So I made it black and changed its position for testing. I also cleaned up the code a bit.
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>