javascript - 移动端想要底部悬浮框在滚动的时候淡出怎么实现？

Question

大概是这样一个页面，在滑动的时候底部的提示框淡出。

我自己实现了一下，但是发现移动端在滚动的时候整个js线程是停止了的，导致动画也卡在一半了。

各位大大有遇到过这种需求吗？是怎么处理的？

在stackoverflow找到了一张图解释这个事件【我已经打算把这个需求拒绝掉了QAQ】

链接【http://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad】

Answer 1

写一个CSS class，利用CSS3动画实现淡出。
监听到滚动时，js为元素加上这个class即可。

Answer 2

楼上正解

Answer 3

看你贴出的stackoverflow的图片感觉像是我之前遇见的一个问题啊，就是页面中间有一个nav的导航，然后上滑到顶部时固定在页面最顶部，这里有个问题就是：通过监听滚动事件判断nav的滚动位置，到达固定。但是浏览器中默认是手指的touchmove事件结束后才能执行固定，也就会出现我手指贴着屏幕上滑动，滑到顶部后，手指松开才进行固定显示。这个问题还没得到什么解决方案，我模拟了一个假的nav让其展示隐藏，可以立刻固定，也参看了天猫双十一的滑动页代码，确实可以做到。