How to run jQuery code when the device viewport is greater than 1000px

Question

I have a functioning jQuery code which which I need to run only on devices with viewport larger than 1000px. I am a beginner. I put up this code to run only on the homepage but I can't get it to run for the said viewport. I should probably also mention that I'm using this inside WordPress. I have added the php code inside my functions.php and works as it's supposed except for this bit. If someone could help, thanks.

The code is as follows: jQuery(document).ready(function($){ $(window).on('scroll', function(){

var y = $(window).scrollTop();
if(window.location.pathname == '/'){
if( y > 0 ){
        $('#top').fadeIn();
        $('#header-space').fadeIn();
    } else {
        $('#top').fadeOut();
        $('#header-space').fadeOut();
    }
}
else {}

});
});

I made this attempt together with CSS but I failed:

$(document).ready(function() {
// run test on initial page load
checkSize();

// run test on resize of the window
$(window).resize(checkSize);
});

//Function to the css rule
function checkSize(){
if ($(".sampleClass").css("float") == "none" ){
    if(window.location.pathname == '/'){

if( y > 0 ){
        $('#top').fadeIn();
        $('#header-space').fadeIn();
    } else {
        $('#top').fadeOut();
        $('#header-space').fadeOut();
    }

}
 else {}
}
}

MyCSS looks like this: Please don't mind my random class names for now.

.sampleClass {float:left;}
@media only screen and (min-width: 1000px){
.sampleClass {float:none;}
}

I'm completely stuck now.

Answer 1

Get the width of the window:

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

Then you can play around like:

if (width > 1000) {
// dosomething big
} else {
// stay low
}