[英]How to run jQuery code when the device viewport is greater than 1000px
I have a functioning jQuery code which which I need to run only on devices with viewport larger than 1000px.我有一个可以运行的 jQuery 代码,我只需要在视口大于 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.我可能还应该提到我在 WordPress 中使用它。 I have added the php code inside my functions.php and works as it's supposed except for this bit.我在我的functions.php 中添加了php 代码,除了这一点外,它按预期工作。 If someone could help, thanks.如果有人可以帮忙,谢谢。
The code is as follows: jQuery(document).ready(function($){ $(window).on('scroll', function(){代码如下: 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:我和 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 looks like this: Please don't mind my random class names for now. MyCSS 看起来像这样: 现在请不要介意我随机的类名。
.sampleClass {float:left;}
@media only screen and (min-width: 1000px){
.sampleClass {float:none;}
}
I'm completely stuck now.我现在完全被困住了。
Get the width of the window:获取窗口的宽度:
var width = $(window).width();
Then you can play around like:然后你可以像这样玩:
if (width > 1000) {
// dosomething big
} else {
// stay low
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.