昨天在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
