1

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).

1
  • En vez de un else por que no pones un else if
    – Christian
    Commented el 15 jun. 2021 a las 3:38

1 respuesta 1

2

El problema es que estás asignando el evento scroll dentro de otro evento que solo se va a disparar cada vez que se cambie el tamaño de la ventana y, de paso, creando múltiples "escuchadores" de scroll.

Ambos eventos deben ser independientes y en ambos tienes que verificar si se cumple la condición deseada.

let header = document.querySelector("header");

window.addEventListener('resize', function() {
    let anchoV1 = window.innerWidth;
    console.log("width: ", anchoV1, "px");   
    if(anchoV1 <= 900) {
        header.style.backgroundSize = "cover"; 
    } else {
        // Valor cuando el tamaño de pantalla sea mayor
    }
});
// Crear evento por separado para desplazamiento
window.addEventListener("scroll", function() {
    // Analizar ancho de pantalla
    if(window.innerWidth > 900) {
        // Aplicar solo cuando el ancho de pantalla es mayor
        header.style.backgroundSize = 160 - + window.pageYOffset/12+"%";
        header.style.opacity = 1 - + window.pageYOffset/700 + "";
    }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.