Блог

Главная - Вопросы по программированию - Как выполнить скрипт только при ширине экрана >1250 пикселей

Как выполнить скрипт только при ширине экрана >1250 пикселей

#javascript #jquery

Вопрос:

У меня есть этот код:

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

Это работает до тех пор, пока я не прокручу немного вниз. Тогда это не сработает.

Комментарии:

1. рассмотрите возможность использования имен классов и медиа — запросов-это значительно упростит обслуживание и устранение неполадок.

2. Это — прокрутите вниз, чтобы увидеть изменения класса в зависимости от ширины экрана developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…

3. @media (device-width > 12500px) { style content }

Ответ №1:

То, что вы ищете, — это window.matchMedia функция.

Используйте его таким образом, чтобы определить размер экрана перед выполнением определенного блока кода:

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