只有当屏幕大小大于992时才执行函数

Question

当我向下滚动时，更大的图像消失，而较小的图像出现。然而，当我在一个较小的屏幕上使用它时，它就是蟹类，所以我希望它只适用于992px以上的屏幕。

我希望只有当人们的分辨率为992 or或更高时，该函数才是活动的。我不知道该怎么做。

$(window).resize(function() {
  if ($(this).width() > 992) {
    $(window).scroll(function() {
      if ($(window).scrollTop() < 20) {
        $('.navbar-brand').stop(true, true).fadeIn("slow");
        $('.image-scroll').css('display', 'None');
      } else {
        $('.navbar-brand').stop(true, true).fadeOut("slow");
        $('.image-scroll').css('display', 'block');
      }
    });
  }
});

Answer 1

当您想要在窗口上执行函数时，调整大小并滚动。创建一个函数会更好。事件中放置if语句，而不是在if中放置事件。

$(document).ready(function(){
  $(window).on('scroll resize' , Scroll_Action)
});

function Scroll_Action(){
    if($(window).scrollTop() < 20 && $(window).width() > 992){
        $('.navbar-brand').stop(true,true).fadeIn("slow");
        $('.image-scroll').css('display', 'None');
    } else {
        $('.navbar-brand').stop(true,true).fadeOut("slow");  
        $('.image-scroll').css('display', 'block');
    }
}

Answer 2

您可以使用jquery

if ($(window).width() > 992) {
   alert('More than 992');
}
else {
   alert('Less than 960');
}

对于您的情况，我想您的代码应该如下所示：

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script> 
if ($(window).width() > 992) {
    alert('More than 992');
 $(window).scroll(function(){
   if($(window).scrollTop()<20){
         $('.navbar-brand').stop(true,true).fadeIn("slow");
        $('.image-scroll').css('display', 'None');
   } else {
         $('.navbar-brand').stop(true,true).fadeOut("slow");  
        $('.image-scroll').css('display', 'block');
   }
});
}else{
    alert('Less than 992');
}
  </script>

​