Question

当我向下滚动时，较大的图像消失而出现较小的图像。但是，当我在较小的屏幕上使用它时，它是螃蟹，所以我希望它仅适用于992px以上的屏幕。

我希望仅当人们的分辨率为992px或更高时才启用该功能。我不知道该怎么办。

$(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

您可以使用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>

Answer 2

虽然要在窗口调整大小和滚动时执行该函数。.最好创建一个函数..您需要将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');
    }
}

仅在屏幕尺寸大于992时执行功能

2 个答案: