我有一个带有 position:fixed 的标题,里面有一个 Logo 。标题在滚动上添加了一个“小”类,并将 Logo 从大图像更改为小图像,并使用 CSS3 过渡实现平滑过渡。
$(document).on("scroll",function(){
if($(document).scrollTop()>70){
$("header").removeClass("large").addClass("small");
}
else{
$("header").removeClass("small").addClass("large");
}
});
这在桌面上的所有浏览器中都可以正常工作。我遇到的问题是在使用 Safari 或 Chrome 的 iOS 上,当我滚动时,动画仅在手指松开后才会出现,从而造成难看的用户体验。有没有一种方法可以检测滚动手势,以便在滚动视口(viewport)时根据速度设置动画?
最佳答案
绑定(bind)到事件“touchmove”。请注意,滚动期间发生的 DOM 更新是不可靠的。例如,我可以将文本附加到 div,但不能预先添加。我可以将 img 标签附加到 div,但不能更新现有图像元素的 src。 (当我说不能时 - 我的意思是我可以,但是直到滚动结束后才会绘制更改。当我说“我可以”时我的意思是立即绘制更改)
关于jquery - 在移动 safari 中滚动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20318002/