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

时间:2015-12-14 23:23:21

标签: javascript jquery html css

我已将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>

1 个答案:

答案 0 :(得分:2)

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

0.0392    0.0770    0.1155    0.1493
0.0520    0.1034    0.1500    0.1899
0.0608    0.1196    0.1703    0.2122
0.0669    0.1304    0.1831    0.2270