Tengo una pagina sencilla en la cual se modifica la propiedad background-size al hacer scroll, lo que quiero hacer es que en resoluciones de 900px o menos no se ejecute esta función, por lo cual tengo el siguiente código JavaScript:
let header = document.querySelector("header");
window.onresize = function() {
let anchoV1 = window.innerWidth;
console.log("width: ", anchoV1, "px");
if (anchoV1 <= 900){
header.style.backgroundSize = "cover";
}else{
window.addEventListener("scroll", function(){
header.style.backgroundSize = 160 - + window.pageYOffset/12+"%";
header.style.opacity = 1 - + window.pageYOffset/700 + "";
})
}
}
y el css:
header{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url("img/mountains-1412683_1280.png");
background-size: 160%;
background-position: center;
}
probando esto inspeccionando la pagina, pasa que para se ejecute el condicional primero debo redimensionar la pagina, después de eso en los dispositivos de resoluciones mayores a 900px ejecuta su parte de código correspondiente, todo normal, el problema es que al pasar a una resolución menor a 900px también ejecuta el bloque de código que tiene "else" (para ver el problema primero probar en resoluciones mayores a 900px y luego pasar a una menor que 900px).
else
por que no pones unelse if