I have created a style for image button:
.sticky {
position: fixed;
top: 50px;
width: 120%;
z-index: 1;
}
@media screen and (min-device-width : 100px) and (max-width: 600px) {
.sticky{
display:none;
}
}
and also implemented a script for it:
window.onscroll = function() {
myFunction();
}
var backarrow = document.getElementById("back");
var sticky = backarrow.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
backarrow.classList.add("sticky");
} else {
backarrow.classList.remove("sticky");
}
}
The functionality works, however, I am facing an issue with Firefox where clicking on the button is disabled in comparison to other browsers. Even though the z-index is set to 1, only Firefox seems to have this problem. Any suggestions on how to fix this specific issue in Firefox would be greatly appreciated. Thank you!