Tengo este código:

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > 1){
            $("#navbar").css({"height":"10vh"});
            $("#logo").css({"height":"4.5vh"});
            $("#navbar-content").css({"top":"4vh"});
            $("#navbar-content").css({"right":"7vh"});
            $("#navbar-content a").css({"font-size":"2vh"});
        }
        else{
            $("#navbar").css({"height":"14vh"});
            $("#logo").css({"height":"8vh"});
            $("#navbar-content").css({"top":"5.6vh"});
            $("#navbar-content").css({"right":"10vh"});
            $("#navbar-content a").css({"font-size":"2.4vh"});
        }
    })
})

Cambia de navegador cuando no estás en la parte superior del sitio. También quiero hacer que mi sitio responda y cambié la forma en que se ve la navegación cuando el ancho de la pantalla es> 1250px. No sé cómo dejar de ejecutar este código cuando la pantalla es más pequeña. He intentado algo como esto:

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).width() > 1250){
            if($(window).scrollTop() > 1){
                $("#navbar").css({"height":"10vh"});
                $("#logo").css({"height":"4.5vh"});
                $("#navbar-content").css({"top":"4vh"});
                $("#navbar-content").css({"right":"7vh"});
                $("#navbar-content a").css({"font-size":"2vh"});
            }
            else{
                $("#navbar").css({"height":"14vh"});
                $("#logo").css({"height":"8vh"});
                $("#navbar-content").css({"top":"5.6vh"});
                $("#navbar-content").css({"right":"10vh"});
                $("#navbar-content a").css({"font-size":"2.4vh"});
            }
        else{
            if($(window).scrollTop() > 1){
                $("#navbar").css({"height":"10vh"});
                $("#logo").css({"height":"4.5vh"});
                $("#navbar-content").css({"top":"4vh"});
                $("#navbar-content").css({"right":"7vh"});
                $("#navbar-content a").css({"font-size":"2vh"});
            }
            else{
                $("#navbar").css({"height":"10vh"});
                $("#logo").css({"height":"4.5vh"});
                $("#navbar-content").css({"top":"4vh"});
                $("#navbar-content").css({"right":"7vh"});
                $("#navbar-content a").css({"font-size":"2vh"});
            }
        }
    })
})

Funciona hasta que me desplazo un poco hacia abajo. Entonces no funcionará.

0
Filipuer 11 may. 2021 a las 23:43

1 respuesta

La mejor respuesta

Lo que busca es la función window.matchMedia.

Úselo así para determinar el tamaño de la pantalla antes de ejecutar un bloque de código específico:

if (matchMedia('(min-width: 1250px)').matches) {
    // do stuff for over 1250 pixels
}
0
Dan Mullin 11 may. 2021 a las 21:13