# 沉浸式加下拉漸變效果 如圖所示，我們要實現下拉后頂部沉浸式效果+頭部漸變效果，怎么做？  # 思路： 一：frame組區域為設置 二：每一個頁面加一個狀況`header` 三：JS增加window監聽下劃效果 四：CSS增加漸變效果 # 代碼 ## 一：frame組區域設置 >原理： 1、總的初始把頭部隱藏，frame把高度去掉 2、重置第一個區域 3、點擊第二個區域顯示頭部，重置高度 4、第三個高度和第二個區域的高度是一樣的 ``` //打開frame組 api.openFrameGroup({ name: 'meunFrame', scrollEnabled: false, vScrollBarEnabled : false, hScrollBarEnabled : false, rect: { x: 0, y: 0, w: 'auto', h: api.winHeight - $api.byId('footer').offsetHeight }, index: 0, frames: [{ name: 'index', url: './index/index.html' // ,bounces: true }, { name: 'trip', url: './trip/index.html', //bounces: true }, { name: 'my', url: './my/index.html', }] }, function (ret, err) { if (ret) { var index = ret.index; //索引值 switch (index) { case 0: $api.text($api.byId('header'), '首頁'); api.setFrameGroupAttr({ name: 'meunFrame', rect: { x: 0, y: 0, w: 'auto', h: api.winHeight - $api.byId('footer').offsetHeight } }); break; case 1: $api.text($api.byId('header'), '行程'); $("#header").removeClass("aui-hide"); var headerPos = $api.offset(header); api.setFrameGroupAttr({ name: 'meunFrame', rect: { x: 0, y: headerPos.h, w: 'auto', h: api.winHeight - $api.byId('footer').offsetHeight - $api.byId('header').offsetHeight } }); break; case 2: $api.html($api.byId('header'), ' <div class="aui-title">我的</div><div class="aui-pull-right aui-btn"><span class="icon iconfont icon-kefu" onclick="Service_tel()"></span></div>'); $("#header").removeClass("aui-hide"); var headerPos = $api.offset(header); api.setFrameGroupAttr({ name: 'meunFrame', rect: { x: 0, y: headerPos.h, w: 'auto', h: api.winHeight - $api.byId('footer').offsetHeight - $api.byId('header').offsetHeight } }); break; } } else { alert(JSON.stringify(err)); } }); ``` ## 二：在首頁加一個`header` ``` <header class="aui-bar aui-bar-nav"> 888 </header> ``` ## 三:JS增加window監聽下劃效果 > 注：需要 `statusBar` 模塊兒 ``` apiready = function() { //沉浸式狀態欄 var systemType = api.systemType; var statusBar = api.require('statusBar'); if (systemType == "ios") { if (navigator.userAgent.indexOf("iPhone") != -1) { statusHeight = 20; $("header").css({ "paddingTop": "20px" }); } else if (navigator.userAgent.indexOf("iPad") != -1) { //不處理沉浸式 } } else { statusBar.getStatusBarHeight(function(ret, err) { $("header").css({ "paddingTop": ret.statusHeight }); }); } } //滾動頭部樣式 window.addEventListener("scroll", function(e) { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 100) { $(".aui-bar-nav").removeClass("test1"); $(".aui-bar-nav").addClass("test"); } else { $(".aui-bar-nav").removeClass("test"); $(".aui-bar-nav").addClass("test1"); } }); ``` ## 四：CSS增加漸變效果 ``` //不透明 .test { background: rgba(44, 215, 222, 1) !important; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } //透明 .test1 { background: rgba(44, 215, 222, 0) !important; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } //固定 .aui-bar-nav { position: fixed !important; top: 0; left: 0; background: rgba(0, 0, 0, 0); z-index: 9999; } ```