Disable a jQuery function at a certain screen width

Question

I've been working on a piece of jQuery code for a while and I can't get it to work the way I want. Basically, I want the completely disable this jQuery code below the screen width of 768px.

Here's the code:

$(document).ready(function () {
    $(".resp-menu-btn").click(function () {

        if ($('.resp-menu-btn').is(':animated')) {
            return;
        }

        if ($('.site-nav').css('display') == 'none') {
            $().stop().slideToggle({ "display": "block"}, 600);
            $('.site-nav ').stop().slideToggle(600);
        }

        else {
            $().animate({"display": "none"}, 600);
            $('.site-nav').slideToggle(600);
        }

    });
});

I've tried a couple things like:

if(window.innerWidth < 768px) return true;
else return false;

and

if ( $(window).width() > 768) { 
myCode 
}

but nothing seems to work.

Can you guys give me some pointers on how to achieve the result I'm looking for? Thanks a lot!

Answer 1

Did you try statement without “px”? I mean you should use like that

 if(window.innerWidth() < 768) return true; else return false;

The window.innerWidth property is read only.