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