7

ユーザーが特定のポイントより下にスクロールすると、css 位置の変更 (css トランジション アニメーションを使用) がトリガーされます。これは、PC の chrome/safari では問題なく動作しますが、iphone では一貫性がありません。アニメーションの代わりにジャンプすることもあれば、何もせずに時折アニメーションすることもあります。

jQuery animate を使用してみて、translate3d を追加し、要素を独自のレイヤーに配置しましたが、すべて同じ結果が得られました。

コードは次のとおりです。

    var logoUp = false;
    $(window)[0].addEventListener('touchmove', function(e) {
      console.log($(window).scrollTop());
      if ($(window).scrollTop() > 33) {
         if(!logoUp){
           $('.trig_logo').css({ 'top': '-90px' })
           logoUp = true;
         }


      } else {
           if(logoUp){
           $('.trig_logo').css({ 'top': '0px' })
           logoUp = false;
         }
      }
    })

CSS

.trig_logo {
    background:url(/img/head_foot/logo.png)  center 0px no-repeat;
    height:400px;
    position: absolute;
    width:100%;
    top:0px;
    -webkit-transition: 0.25s top;
}
4

1 に答える 1

0

-webkit-transitioniPhoneでまったく動作することに驚いています。

通常、次のように表示されます。

-webkit-transition: .25s top;
-moz-transition: .25s top;
-o-transition: .25s top;
transition: .25s top; /* <-- actual standard */

ベンダープレフィックスはすごいですよね？(ない)

于 2013-10-03T11:54:15.653 に答える