觸發的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() 
    } 
});