昨天在segmentfault上看到有人問一個問題女阀，說如何模仿支付寶APP的滑動時頭部的淡入淡出效果译打，他當(dāng)時自己做的效果如下圖：
他說隱藏顯示的切換很生硬智哀，我就自己寫了一個殖侵，有需要的人可以參考一下。
思路#
頁面頭部的圖標(biāo)和頁面主體的圖標(biāo)镰烧，是相反的效果拢军，也就是說，頁面頭部逐漸顯示時怔鳖，頁面主體的圖標(biāo)逐漸隱藏茉唉。其實他已經(jīng)實現(xiàn)了顯示和隱藏的功能，問題是如何達(dá)到逐漸的流暢程度败砂。
關(guān)鍵字：逐漸
顯示與隱藏是根據(jù)頁面滾動而觸發(fā)的赌渣，得出：
思路一：頁面滾動到一定距離，如：80px昌犹，后觸發(fā)對應(yīng)的顯示和隱藏（上圖所示結(jié)果）
思路二：通過透明度控制顯示隱藏，頁面滾動過程不斷觸發(fā)對透明度的修改
明顯览芳，思路二的效果可能會更好
實現(xiàn)#
html的排版我就不說了斜姥，直接說滾動過程的代碼實現(xiàn)
var box = $('#scroll');//滾動元素
var header=$('.header-wrap')//頭部
var icons=$('.card1 .icon')//主體需要隱藏顯示的圖標(biāo)
box.scroll(function() {
var y = box.scrollTop();//獲取滾動的高度
var o=y/60; //60是根據(jù)自己需求中，需要滾動到什么位置完全的隱藏或者完全的顯示
得出o值（透明度 0到1）
header.css('opacity',o)//設(shè)置頭部透明度
icons.css('opacity',1-o)//設(shè)置主體圖標(biāo)透明度
})
效果#
scroll.gif
