jquery - 在移动 safari 中滚动动画

标签 jquery css mobile css-transitions fixed

我有一个带有 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/

相关文章:

javascript - Jquery 试图找到特定的父 div

jquery - 表格单元格父级内的猫头鹰轮播使父级扩展怪异

html - Bootstrap 3 文本对齐 : center not working

mobile - 如何(或应该)在网站中标记电话号码?

javascript - 在 View 中加载模型数据后的 AngularJs 事件?

jquery - 在backbone.js View 中提交被多次调用

jquery - 悬停时出现自定义切换

html - CSS3 无限动画图形

css - 我在同一行中有两个标题,但我不知道如何布局页面以使其在移动设备上运行

reactjs - React js Material-UI 响应式表格