# 沉浸式加下拉渐变效果 如图所示，我们要实现下拉后顶部沉浸式效果+头部渐变效果，怎么做？  # 思路： 一：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; } ```