I am facing an issue with my CSS and JS code. When I slide down the page, my logo should appear from the left with opacity set to 0. However, when I scroll back up to the top, the logo is supposed to move back to its original position on the left and have its opacity set back to 0. This functionality works fine on computers and Android phones, but it does not work on iOS devices. Can someone help me identify what is wrong with my code?
After sliding up, the logo moves to the left but does not disappear as expected. Thank you in advance for any insights or suggestions.
JS:
const handleToggle = (e) => {
let brands = document.getElementsByClassName("stickyBrand"); //This refers to my logo.
if (e) {
Array.from(brands).forEach((el) => {
el.classList.add("fadeInLeft");
el.classList.remove("fadeOutLeft");
});
} else {
Array.from(brands).forEach((el) => {
el.classList.add("fadeOutLeft");
el.classList.remove("fadeInLeft");
});
}
};
CSS:
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes fadeOutAnimationOperaSafari {
0% {
opacity: 0 !important;
-webkit-transform: translateX(0);
}
100% {
opacity: 1 !important;
-webkit-transform: translateX(-50px);
}
}
@keyframes fadeOutAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 1;
-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
}