当设备视口大于 1000px 时如何运行 jQuery 代码

Question

我有一个功能正常的 jQuery 代码，我只需要在视口大于 1000 像素的设备上运行它。我是初学者。我将此代码设置为仅在主页上运行，但我无法让它为所述视口运行。我可能还应该提到我在 WordPress 中使用它。我已经在我的functions.php 中添加了php 代码，除了这一点之外，它可以正常工作。如果有人可以帮忙，谢谢。

代码如下： jQuery(文档).ready(函数($){ $(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 {}

});
});

我和 CSS 一起做了这个尝试，但我失败了：

$(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 看起来像这样：暂时请不要介意我的随机类名。

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

我现在完全卡住了。

Answer 1

获取窗口的宽度：

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

然后你可以像这样玩：

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