ionic3实现透明导航栏
这里（1）实现透明导航栏并且根据页面滑动来调整导航栏的透明度（2）导航栏根据页面滑动的%来隐藏，当向上滚动时在显示。
实现效果如下：
实现以上效果：（1）你要在ion-里面定义一个div（class="046a-a196-aefb-8fcb "）用来模拟导航栏的样子，其次还要在这个div里面定义一个div(class="9577-e2e8-506b-4360 ")来设置当页面滚动时导航栏的背景颜色等（这里div里面也写导航栏的内容是由于：页面滚动到ion-list的时候页面为白色，这时候导航栏里面的文字就看不见（导航栏里文字为白色））。（2）导航栏根据页面滚动的%来隐藏，这里计算屏幕的高度，和目前滚动的高度，（3）判断向上滚动还是向下滚动来确定是否显示导航栏。
（1）
列表查询 此处放置列表条件检索按钮 {{item.title}} 2.
import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';/*** Generated class for the LzhrmsPersonnelPage page.** See https://ionicframework.com/docs/components/#navigation for more info on* Ionic pages and navigation.*/@IonicPage()
@Component({selector: 'page-lzhrms-personnel',templateUrl: 'lzhrms-personnel.html',
})
export class LzhrmsPersonnelPage {@ViewChild('headBgColor')headBgColorDiv:ElementRef;@ViewChild('lyScroll')lyScrollDiv:ElementRef;@ViewChild('headerNavHidden')headerNavHidDiv:ElementRef;items = [{title: 'item1'}];constructor(public navCtrl: NavController, public navParams: NavParams,public elementRef: ElementRef) {}//等待页面加载完成之后在加载ionViewDidLoad() {this.headerChangeColorAndHidHeader();}additem() {this.items.push({ title: 'item' + (this.items.length + 1) });}deletitem(list, index) {list.splice(index, 1);}// 改变颜色public headerChangeColorAndHidHeader() {let nowHeight=0,beforeHeight=0;let displayDiv=this.headerNavHidDiv.nativeElement;let HeadBgdiv= this.headBgColorDiv.nativeElement;let scrollDiv = this.lyScrollDiv.nativeElement;// 计算屏幕的高let screenHeight=window.screen.height;var nowOpacity = 0;scrollDiv.onscroll = function (event) {//上滚显示菜单导航nowHeight = scrollDiv.scrollTop;console.log(beforeHeight+" "+nowHeight);if(nowHeight<=beforeHeight){displayDiv.style.visibility='visible';}//修改颜色if (scrollDiv.scrollTop / 250 < 0.85) {nowOpacity = this.scrollTop / 250;}HeadBgdiv.style.opacity = nowOpacity;// 当滑动到一定程度隐藏顶部菜单if(this.scrollTop/screenHeight>0.30 && (nowHeight>beforeHeight) ){displayDiv.style.visibility='hidden';}setTimeout(function(){beforeHeight=nowHeight;},0); }}
}3.
ion-content{overflow:scroll;}.headerNav{background-color:transparent;position: fixed;z-index: 2;width:100%;height: 7vh;visibility:visible;}.headerNav .headerHome{padding:1vh;width:20%;height: inherit;float:left;color:white;font-size:2.5rem;text-align: center;}.headerNav .headerTitle{padding:2vh;width:60%;height: inherit;color: white;font-size:1.5rem;text-align: center;float:left;}.headerNav .headerMenu{padding:1vh;width:20%;height:inherit;color:white;font-size:2.5rem;text-align: center;float:right;}.headerNav #header_bg{background-color: #4323d4;opacity: 0;height: inherit;position: fixed;width: 100%;}通过以上代码就可以实现以上效果：
这里我说一下我写这个效果时出现的错误：
（1）：fixed和：的区别：
fixed：固定定位 ：绝对定位
在没有滚动条的情况下没有区别
在有滚动条的情况下：fixed定位不会随滚动条的一定而移动，会随滚动条滚动而移动（一般fixed用在遮盖层或固定在页面摸个位置）
（2）：none和 ::
这两个都是用来隐藏一个div的实现效果一样，
：none是直接隐藏且物理位置也消失，
:是隐藏但物理位置还在，他所占的空间还存在
（3）延时0毫秒的作用：
正常情况下都是按照顺讯执行的，但是有时候需要等后面语句都执行完在执行本身，这时候就用延时0来实现
例如：
alert(1);
setTimeout("alert(2)", 0);
alert(3);
这里是我的一些总结，希望对大家有一点帮助，其次这里有什么需要完善的希望大家多多指教
