仅当WordPress中的视口高于1000px时如何执行一些jquery代码答案

【问题标题】：How to execute some piece of jquery code only when the viewport is above 1000px in WordPress仅当WordPress中的视口高于1000px时如何执行一些jquery代码
【发布时间】：2020-02-13 18:24:48
【问题描述】：

当视口高于 1000 像素及以上时，我需要在这里执行一些 jquery 代码，但我无法让它工作。请有人告诉我我做错了什么。

jQuery(document).ready(function($) {
  $(window).on('scroll', function() {
    var y = $(window).scrollTop();
    var width = $(window).innerWidth();

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

【问题讨论】：

老实说，这看起来确实像是媒体查询和 CSS 的工作。
100 像素？还是 1000 像素？请更新问题和标题。
抱歉这个错误。那应该是 1000 像素。
如果我们可以用简单的 css 解决问题，你为什么要编写脚本

标签： jquery wordpress media-queries

【解决方案1】：

你真的不需要 $(window).innerWidth() 你可以使用普通的js。

window.innerWidth

如果你使用 Jquery，它会使用

$( window ).width();

https://api.jquery.com/width/

jQuery(document).ready(function($) {
  $(window).on('scroll', function() {
    var y = $(window).scrollTop();
    var width = $(window).width();

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

【讨论】：

我可能应该提到代码的目的是显示由 id #top 引用的菜单。我添加了仅在有效的主页上执行的代码。我不希望在低于 1000 像素的视口上出现这种行为。我已经尝试了上面的代码，但菜单的行为仍然与更大的设备（1000 像素以上）相同。对于小于 1000 像素的设置分辨率，我希望菜单不受此代码的影响。我在 WordPress 中这样做。

【解决方案2】：

试试这个对我有用的..

if($(window).width() > 1000){
  	$('#top').fadeIn();
    $('#header-space').fadeIn();
}
else{
    $('#top').fadeOut();
    $('#header-space').fadeOut();
}

【讨论】：

我在 WordPress 中使用它。我不确定是否需要第一行。我可能是错的。
那是jquery库文件，不需要。如果你已经调用了jquery插件
只需将内部宽度替换为上面提到的宽度对我有用
谢谢！这是最后的工作，上面所有的答案都是正确的，我只需要稍微调整一下。 jQuery(document).ready(function($){ $(window).on('scroll', function(){ var y = $(window).scrollTop(); var width = $(window).innerWidth(); if(window.location.pathname == '/'){ if ( window.innerWidth > 1000) { if( y > 0 ){ $('#top').fadeIn(); $('#header-space').fadeIn(); } else { $('#top').fadeOut(); $('#header-space').fadeOut(); } }} else {} }); });