触发的jquery只有某个屏幕最小宽度

Question

我有此代码

jQuery(document).ready(function($) { 
    $(window).scroll(function() {  
     var scroll = $(window).scrollTop(); 

     if (scroll >= 100) { 
      $("#inslist").addClass("fadeoutnow"); 
     } 

     if (scroll <= 100) { 
      $("#inslist").removeClass("fadeoutnow"); 
     } 

     if (scroll >= 315) { 
      $(".page-id-556 .vc_col-sm-4").addClass("floatcontact"); 
     } 

     if (scroll <= 315) { 
      $(".page-id-556 .vc_col-sm-4").removeClass("floatcontact"); 
     } 
    }); 
}); 

我希望它仅在某些屏幕宽度工作，基本上最小宽度 我曾尝试添加一行在不同以下部分代码，但它不起作用。我不是JavaScript专家，我现在正在学习。 和我的PHP概念在这里不起作用。

if ($(window).width() >= 1024) { 
} 

我已尝试添加

if (scroll >= 315) & ((window).width() >= 1024){ { 
$(".page-id-556 .vc_col-sm-4").addClass("floatcontact"); 

}

Answer 1

你需要去检查resize()事件的窗口宽度，否则它被加载时的布局将只反映宽度。试试这个：

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

     if (winWidth <= 1024) 
      return; 

     $("#inslist").toggleClass("fadeoutnow", scroll >= 100); 
     $(".page-id-556 .vc_col-sm-4").toggleClass("floatcontact", scroll >= 315); 
    }); 
}); 

还要注意简化使用toggleClass()基于该scroll位置布尔参数。

Answer 2

你可以你的代码绑定到窗口的resize事件：

function activate() { 
      var scroll = $(window).scrollTop(); 

      if (scroll >= 100) { 
       $("#inslist").addClass("fadeoutnow"); 
      } 

      if (scroll <= 100) { 
       $("#inslist").removeClass("fadeoutnow"); 
      } 

      if (scroll >= 315) { 
       $(".page-id-556 .vc_col-sm-4").addClass("floatcontact"); 
      } 

      if (scroll <= 315) { 
       $(".page-id-556 .vc_col-sm-4").removeClass("floatcontact"); 
      } 
    } 


jQuery(document).ready(function($) { 
    $(window).on('resize scroll', function(){ 
     if ($(window).width() >= 1024) 
     activate() 
    } 
});