【发布时间】:2015-12-26 11:48:41
【问题描述】:
我正在构建一个网站,并且我正在使用媒体查询来使网站响应移动设备。在我的网站的桌面版本上,我使用以下 Javascript 使 2 个 div 在向下滚动 100 像素后淡入/淡出。
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('#firstHeadingLeft, #firstHeadingRight').fadeIn(3000);
} else {
$('#firstHeadingLeft, #firstHeadingRight').fadeOut();
}
});
现在的问题是,我不希望这个 javascript 在我的移动设备上处于活动状态,我希望 2 个 div 始终存在。我做了一些搜索,发现了这个
How to disable JavaScript in media query
其中一个建议是使用此代码添加事件侦听器
window.addEventListener('resize', function(){
if(window.innerWidth > 568){
...execute script
}
});
但是,由于我不精通 javascript,我不确定如何正确地将我的代码包装到事件侦听器代码中。
如果有人能帮我一把,将不胜感激! -- 谢谢!
【问题讨论】:
-
只需使用
resize事件(如您所拥有的)和onload事件执行代码。你可以通过调用一个函数来做到这一点。你几乎已经拥有它了:) -
尝试使用
screen.width而不是window.innerWidth
标签: javascript mobile media-queries