我在WordPress页面上加载了一个javascript片段,所以语言是PHP。
它看起来像这样:
(function($) {
$(document).ready(function() {
var primaryNav = $('body.home').find('nav.nav-primary');
primaryNav.hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
primaryNav.fadeIn();
} else {
primaryNav.fadeOut();
}
});
});
})(jQuery);
问题是,在更大的分辨率下,一切都很好,响应迅速,一直到宽度低至 688px。
当我的宽度下降到 687 像素时,向下滚动时菜单不显示,这是一个问题。
有没有办法基本上说:
"不要以 687 像素宽度或更小的设备分辨率加载此 JavaScript 片段"?
在NCDP网站上帮助我解决此问题的任何指导将不胜感激!
更新:
当我将Ianaya的片段合并到NCDP上时:
<script type="text/javascript">
if (window.screen.availWidth > 687) {
(function($) {
$(document).ready(function() {
var primaryNav = $('body.home').find('nav.nav-primary');
primaryNav.hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
primaryNav.fadeIn();
}
else {
primaryNav.fadeOut();
}
});
});
})(jQuery);
}
向下滚动 150 像素时菜单不会加载,此时菜单应该显示 - 或者,如果我可以在小于 688 像素的设备上隐藏此 javascript,只需始终显示菜单。
您可以访问 window.screen 对象来检测设备分辨率:
if (window.screen.availWidth > 687) {
(function($) {
$(document).ready(function() {
var primaryNav = $('body.home').find('nav.nav-primary');
primaryNav.hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
primaryNav.fadeIn();
}
else {
primaryNav.fadeOut();
}
});
});
})(jQuery);
}