How to Make a jquery code run only on the desktop version of the site

Question

I have the following problem in the code below:

// Muda o menu de imagem pra texto
    var x = $(window).width();

        if(x >= 590){
            $(document).on("scroll",function(){

                    if($(document).scrollTop()>100){ //QUANDO O SCROLL PASSAR DOS 100px DO TOPO
                        $("#nav_logo_img").removeClass("imgON").addClass("imgnone");
                        $("#nav_logo_texto").addClass("logo_textoON").fadeIn();
                        $("nav").addClass("nav_pequeno").addClass("bg_navbar");
                    } else{
                        $("#nav_logo_img").removeClass("imgnone").addClass("imgON");
                        $("#nav_logo_texto").removeClass("logo_textoON").fadeOut();
                        $("nav").removeClass("nav_pequeno").removeClass("bg_navbar");
                    }

            });
        }else{
            // não muda nada
        }

This code is so that the navbar when passing 100px decreases in size, and changes the color and logo of the site, this is working 100%. The problem is that in the mobile version the text already appears by default, the more the code above makes the logo blink on the screen, I tried to use an if to change this in the mobile version more not getting you, without someone can give me a light on how to make this effect appear in the desktop version??

Answer 1

If the issue is just limiting code execution on desktop, you can use the library (it’s only 4K):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/isMobile.min.js"></script>

Then in your javascript, instead of having the if by windows width you can put right by ! isMobile.any

The code went something like this:

if(!isMobile.any){
        $(document).on("scroll",function(){

                if($(document).scrollTop()>100){ //QUANDO O SCROLL PASSAR DOS 100px DO TOPO
                    $("#nav_logo_img").removeClass("imgON").addClass("imgnone");
                    $("#nav_logo_texto").addClass("logo_textoON").fadeIn();
                    $("nav").addClass("nav_pequeno").addClass("bg_navbar");
                } else{
                    $("#nav_logo_img").removeClass("imgnone").addClass("imgON");
                    $("#nav_logo_texto").removeClass("logo_textoON").fadeOut();
                    $("nav").removeClass("nav_pequeno").removeClass("bg_navbar");
                }

        });
    }else{
        // não muda nada
    }