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

changing scroll-based fade on mobile?

本文关键字：滚动 淡出 淡入 于滚动 移动      更新时间：2023-09-26

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

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

$(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
     }  
});
相关文章：