Separate functions based on screen width (changes on resize)

Question

I have a website navigation giving me problems. What I am after is having a mobile navigation and a more robust fullscreen navigation. I have dumbed this down so you can see my problem. I would like this to dynamically change the if/else based on the current window size... right now if you start on if it stays on if no matter what the window size, and vis versa.

Thanks for any help!

var w = $(window).width();

function checkSize() {

    if ( w < 770 ) {
        console.log("This is a small window");
    } else {
        console.log("This is a big window");
    };
};

$(window).resize(checkSize);
checkSize();

Answer 1

You have to move var w = $(window).width(); to the checkSize function.

Answer 2

You should maybe have a look on "media querys" I guess.