版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Dan_2017/article/details/78973364
这里（1）实现透明导航栏并且根据页面滑动来调整导航栏的透明度（2）导航栏根据页面滑动的%来隐藏，当向上滚动时在显示。
实现效果如下：
实现以上效果：（1）你要在ion-content里面定义一个div（class="headerNav"）用来模拟导航栏的样子，其次还要在这个div里面定义一个div(class="header_bg")来设置当页面滚动时导航栏的背景颜色等（这里div里面也写导航栏的内容是由于：页面滚动到ion-list的时候页面为白色，这时候导航栏里面的文字就看不见（导航栏里文字为白色））。（2）导航栏根据页面滚动的%来隐藏，这里计算屏幕的高度，和目前滚动的高度，（3）判断向上滚动还是向下滚动来确定是否显示导航栏。
（1）
<ion-content id="home" >
<div class="headerNav" #headerNavHidden>
<div class="headerHome">
<ion-icon name="md-home"></ion-icon>
</div>
<div class="headerTitle">
<span>
二级次界面管理员
</span>
</div>
<div class="headerMenu">
<ion-icon name="md-menu"></ion-icon>
</div>
<div id="header_bg" #headBgColor>
<div class="headerHome">
<ion-icon name="md-home"></ion-icon>
</div>
<div class="headerTitle">
<span>
二级次界面管理员
</span>
</div>
<div class="headerMenu">
<ion-icon name="md-menu"></ion-icon>
</div>
</div>
</div>
<!-- scroll-content：绝对定位，内容元素占满整个屏幕 -->
<div #lyScroll scroll="false" class="scroll-content">
<div class="divpage">
<ion-slides pager>
<ion-slide>
<img src="assets/imgs/card-amsterdam.png">
</ion-slide>
<ion-slide>
<img src="assets/imgs/card-saopaolo.png">
</ion-slide>
<ion-slide>
<img src="assets/imgs/tianyuan.jpg">
</ion-slide>
<ion-slide>
<img src="assets/imgs/dujia.jpg">
</ion-slide>
</ion-slides>
</div>
<ion-list>
<ion-list-header>
列表查询 此处放置列表条件检索按钮
</ion-list-header>
<ion-item-sliding *ngFor="let item of items;let i=index;">
<ion-item>
{{item.title}}
</ion-item>
<ion-item-options>
<button ion-button color="danger" (click)="deletitem(items,i)">
删除
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</div>
<ion-fab right bottom>
<button ion-fab color="primary">
<ion-icon name="menu"></ion-icon>
</button>
<ion-fab-list side="top">
<button ion-fab (click)="additem()">
<ion-icon name="add"></ion-icon>
</button>
<button ion-fab>
<ion-icon name="search"></ion-icon>
</button>
<button ion-fab>
<ion-icon name="list"></ion-icon>
</button>
</ion-fab-list>
</ion-fab>
</ion-content>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);
}
}
} 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）position：fixed和position：absolute的区别：
fixed：固定定位 absoulte：绝对定位
在没有滚动条的情况下没有区别
在有滚动条的情况下：fixed定位不会随滚动条的一定而移动，absoulte会随滚动条滚动而移动（一般fixed用在遮盖层或固定在页面摸个位置）
（2）display：none和 visibility:hidden:
这两个都是用来隐藏一个div的实现效果一样，
display：none是直接隐藏且物理位置也消失，
visibility:hidden是隐藏但物理位置还在，他所占的空间还存在
（3）setTimeout延时0毫秒的作用：
正常情况下javascript都是按照顺讯执行的，但是有时候需要等后面语句都执行完在执行本身，这时候就用setTimeout延时0来实现
例如：
alert(1);
setTimeout("alert(2)", 0);
alert(3);
<!-- 虽然延时了0ms,但是执行顺序为：1，3，2 -->
<!-- 这样就保证setTimeout里面的语句在某一代码段中最后执行。 -->