javascript - 仅当屏幕宽度> 1250px时如何执行脚本

Question

我有这个代码：

$(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"});
        }
    })
})

当您不在站点顶部时，它会更改导航器。我也不想让我的网站响应，我改变了当屏幕宽度大于 1250 像素时导航的外观。当屏幕较小时，我不知道如何停止执行此代码。我试过这样的事情：

$(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"});
            }
        }
    })
})

它一直有效，直到我向下滚动一点。然后就不行了。

标签： javascriptjquery

Answer 1

您正在寻找的是window.matchMedia功能。

在执行特定代码块之前，像这样使用它来确定屏幕大小：

if (matchMedia('(min-width: 1250px)').matches) {
    // do stuff for over 1250 pixels
}