昨天在segmentfault上看到有人問一個問題，說如何模仿支付寶APP的滑動時頭部的淡入淡出效果，他當時自己做的效果如下圖：

他說隱藏顯示的切換很生硬，我就自己寫了一個，有需要的人可以參考一下。

思路#

頁面頭部的圖標和頁面主體的圖標，是相反的效果，也就是說，頁面頭部逐漸顯示時，頁面主體的圖標逐漸隱藏。其實他已經(jīng)實現(xiàn)了顯示和隱藏的功能，問題是如何達到逐漸的流暢程度。

關(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')//主體需要隱藏顯示的圖標
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è)置主體圖標透明度
})

效果#

scroll.gif