在移动设备上更改基于滚动的淡入淡出？

Question

我已将jsFiddle 链接到我正在使用的代码。淡入淡出滚动功能运行良好。我只想能够根据屏幕尺寸改变淡入淡出的速度。本质上，由于媒体查询的大小发生变化，我需要它比在较小的屏幕（手机/平板电脑）上更快地消失。

例如：能够调整这些数字...

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

基于屏幕尺寸。

我在考虑 if/else 条件，但我对 JS 和 jQuery 非常陌生，无法弄清楚。谢谢你。

$(window).scroll(function() {    
        var scroll = $(window).scrollTop();
          $('#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});
           
        });

#one{
  margin: 2em auto 2em auto;
  padding-top: 1em;
  height: 300px;
  width: 100%;
  background-color: coral;
  text-align: center;
  font-family: sans-serif;
  font-size: 2em;
  }
  
  #two{
  margin: 2em auto 2em auto;
  padding-top: 1em;
  height: 300px;
  width: 100%;
  background-color: coral;
  text-align: center;
  font-family: sans-serif;
  font-size: 2em;
  }
  
  #three{
  margin: 2em auto 2em auto;
  padding-top: 1em;
  height: 300px;
  width: 100%;
  background-color: coral;
  text-align: center;
  font-family: sans-serif;
  font-size: 2em;
  }
  
  #four{
  margin: 2em auto 2em auto;
  padding-top: 1em;
  height: 300px;
  width: 100%;
  background-color: coral;
  text-align: center;
  font-family: sans-serif;
  font-size: 2em;
  }
  
  #five{
  margin: 2em auto 2em auto;
  padding-top: 1em;
  height: 300px;
  width: 100%;
  background-color: coral;
  text-align: center;
  font-family: sans-serif;
  font-size: 2em;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


<div id="one">
first fade element
</div>
<div id="two">
second fade element
</div>
<div id="three">
third fade element
</div>
<div id="four">
fourth fade element
</div>
<div id="five">
fifth fade element
</div>

Answer 1

检查滚动事件中的窗口宽度

$(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
     }  
});