[UI动效]移动端头部滑动淡入淡出

昨天在segmentfault上看到有人问一个问题，说如何模仿支付宝APP的滑动时头部的淡入淡出效果，他当时自己做的效果如下图：

他说隐藏显示的切换很生硬，我就自己写了一个，有需要的人可以参考一下。

思路#

页面头部的图标和页面主体的图标，是相反的效果，也就是说，页面头部逐渐显示时，页面主体的图标逐渐隐藏。其实他已经实现了显示和隐藏的功能，问题是如何达到逐渐的流畅程度。

关键字：逐渐

显示与隐藏是根据页面滚动而触发的，得出：
思路一：页面滚动到一定距离，如：80px，后触发对应的显示和隐藏（上图所示结果）
思路二：通过透明度控制显示隐藏，页面滚动过程不断触发对透明度的修改
明显，思路二的效果可能会更好

实现#

html的排版我就不说了，直接说滚动过程的代码实现

var box = $('#scroll');//滚动元素
var header=$('.header-wrap')//头部
var icons=$('.card1 .icon')//主体需要隐藏显示的图标
box.scroll(function() {
    var y = box.scrollTop();//获取滚动的高度
    var o=y/60; //60是根据自己需求中，需要滚动到什么位置完全的隐藏或者完全的显示 
    得出o值（透明度 0到1）
    header.css('opacity',o)//设置头部透明度
    icons.css('opacity',1-o)//设置主体图标透明度
})

效果#

scroll.gif