Question

这是我第一次创建滚动动画。在到达元素后，我使用documentsize变量和scrollTop（）更改了该元素的类以产生效果。它在桌面上完美运行，但在移动设备上只有第一个元素有效，而其他元素可能不是scrollTop（）在桌面和移动设备上的计算方式不同，因此我需要使用条件为桌面和移动设备应用不同的代码。我不确定这就是为什么我在这里问是否只有这种方式的原因。

谢谢。

 var documentsize = $(document),
  firstelement = $('.firstelement'),
  firstelementtime = 200,
  secondelement = $('.secondelement'),
  secondelementtime = 1400;


  documentsize.on('scroll',function(){

     if(documentsize.scrollTop() > firstelementtime){

         $('.firstelement').removeClass('myanimation');
         $('.firstelement').addClass('fadeInLeft');
     }


     if(documentsize.scrollTop() > secondelementtime){

         $('.secondelement').removeClass('myanimation');
         $('.secondelement').addClass('fadeInRight');
     }












     if(documentsize.scrollTop() < firstelementtime){

         $('.firstelement').removeClass('fadeInLeft');

           setTimeout(function(){

             $('.firstelement').addClass('myanimation');

           },500);
     }         



    if(documentsize.scrollTop() < secondelementtime){

         $('.secondelement').removeClass('fadeInRight');

           setTimeout(function(){

             $('.secondelement').addClass('myanimation');

           },500);
     }  

  });

Answer 1

如果您担心要在台式机和PC中计算不同的值，最好使用$(element).offset()根据父元素或纯JavaScript element.offsetTop.获取顶部和左侧的值，然后再使用$(parent).scroll()向下滚动您从偏移量获得的像素值。

滚动动画无法在移动设备上像桌面滚动一样工作。

1 个答案: