当用户滚动到某个点以下时,我正在触发css位置更改(使用css过渡动画).这适用于电脑上的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; }
解决方法
我很惊讶-webkit-transition在iPhone上工作.
通常你会看到类似的东西：
-webkit-transition: .25s top; -moz-transition: .25s top; -o-transition: .25s top; transition: .25s top; /* <-- actual standard */
供应商前缀是惊人的吗？ (不)
