How to make jquery function execute on mobile resolution only?

Question

JavaScript

Good day!
There are such lines of jquery script. Which remove and add css classes when scrolling the page.

$(window).scroll(function() {
    if($(this).scrollTop() > 40)
    {
        $('#nav1').removeClass('gbg');
        $('#nav1').addClass('rounded-0 gbg2 py-1');
        $('#nava').removeClass('btn-outline-danger');
        $('#nava').addClass('btn-danger');
        $('#loga').removeClass('wa100');
        $('#loga').addClass('wa80');
    } else {
        $('#nav1').removeClass('rounded-0 gbg2 py-1');
        $('#nav1').addClass('gbg');
        $('#nava').removeClass('btn-danger');
        $('#nava').addClass('btn-outline-danger');
        $('#loga').removeClass('wa80');
        $('#loga').addClass('wa100');
    }
});

How to make it so that when viewing the site from a phone (500px), only what is in 'else' is executed?

Answer 1

Here 's a method for checking the CSS-media property via JS.