Javascript 在手机上更改基于淡入淡出的滚动？

我已将链接到我正在使用的代码。淡入淡出滚动功能运行良好。我只想能够改变褪色率的屏幕大小的基础上。基本上，我需要它比小屏幕（手机/平板电脑）上的更快褪色，因为我的媒体查询的大小发生了变化

Ex：能够调整这些数字…

      $('#one').css({'opacity':(( **300**-scroll )/ **300**)+0.4});

基于屏幕大小。

我在考虑一个if/else条件，但我对JS和jQuery非常陌生，无法理解它。多谢各位

$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
$（'one'）.css（{'opacity'：（（300滚动）/300）+0.4}）；
$（'two'）.css（{'opacity'：（（600卷）/300）+0.4}）；
$（#three'）.css（{'opacity'：（（1100滚动）/300）+0.4}）；
$（#four'）.css（{'opacity'：（（1400滚动）/300）+0.4}）；
$（'five'）.css（{'opacity'：（（1700滚动）/300）+0.4}）；
});
#一个{
保证金：2em自动2em自动；
垫面：1米；
高度：300px；
宽度：100%；
背景颜色：珊瑚；
文本对齐：居中；
字体系列：无衬线；
字号：2em；
}
#两个{
保证金：2em自动2em自动；
垫面：1米；
高度：300px；
宽度：100%；
背景颜色：珊瑚；
文本对齐：居中；
字体系列：无衬线；
字号：2em；
}
#三{
保证金：2em自动2em自动；
垫面：1米；
高度：300px；
宽度：100%；
背景颜色：珊瑚；
文本对齐：居中；
字体系列：无衬线；
字号：2em；
}
#四{
保证金：2em自动2em自动；
垫面：1米；
高度：300px；
宽度：100%；
背景颜色：珊瑚；
文本对齐：居中；
字体系列：无衬线；
字号：2em；
}
#五{
保证金：2em自动2em自动；
垫面：1米；
高度：300px；
宽度：100%；
背景颜色：珊瑚；
文本对齐：居中；
字体系列：无衬线；
字号：2em；
}

第一淡入元素
第二淡入元素
第三淡入元素
第四淡入元素
第五淡入元素
检查滚动事件中的窗口宽度

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if($(this).width() > 500){ // if window width bigger than 500  change 500 with width you need
       $('#one').css({'opacity':(( 300-scroll )/ 300)+0.4});
       $('#two').css({'opacity':(( 600-scroll )/ 300)+0.4});
       $('#three').css({'opacity':(( 1100-scroll )/ 300)+0.4});
       $('#four').css({'opacity':(( 1400-scroll )/ 300)+0.4});
       $('#five').css({'opacity':(( 1700-scroll )/ 300)+0.4});
     }else{
            //if less than 500
     }  
});

欢迎来到stackoverflow:）谢谢！我一直在谷歌上搜索它，并潜伏着，所以我决定加入。也许有一天，我会在这方面做得足够好，为大家做出贡献。哈哈，你问了一个很好的问题：）就是这样。谢谢大家!@tiffanyaych祝你好运：）@tiffanyaych这更重要。。如果您创建一个响应模板，您可能还需要添加调整大小事件，以便像$（window）一样使用它。。祝你好运：）