一、html代码
<!--导航栏-->
<navid="dao">
<x-icontype="ios-arrow-back"size="30"class="cell-back"id="cell-back"></x-icon>
<h4id="navtext">{{Jingyuan}}</h4>
</nav>
二、css代码
#dao{
position:fixed;
left:0;
top:0;
right:0;
width:100%;
height:3rem;
z-index:999;
}
#navtext{
position:absolute;
left:50%;
top:50%;
text-align:center;
transform:translate(-50%,-50%);
color:#fff;
/*background:rgb(66,65,66)*/
}
#cell-back{
position:absolute;
left:0;
top:50%;
transform:translate(0,-50%);
fill:#fff;
}
三、js代码：
<script>
window.onscroll=function(){
varh=document.documentElement.scrollTop||document.body.scrollTop;
console.log(h*2.5);//控制台查看监听滚动
varheaderTop=document.getElementById("dao");//获取导航栏id
varnavtext=document.getElementById("navtext");//获取导航栏中的文字id
varback=document.getElementById("cell-back");//获取导航栏中的返回图标iconid
if(h>=42){//header的高度是40px;
headerTop.style.background="#fff";
headerTop.style.color="rgba(66,65,66,1)";
//设置导航栏中的文字样式
navtext.style.background="#fff";
navtext.style.color="rgba(66,65,66,1)";
//设置导航栏中的返回图标icon样式
back.style.background="#fff";
back.style.fill="rgba(19,146,245,1)";
}else{
if(h<10){
//40*2.5=100;这样透明度就可以由0渐变到100%；
headerTop.style.background="rgba(255,255,255,0.0"+h*2.5+")";
headerTop.style.color="rgba(66,66,66,0.0"+h*2.5+")";
navtext.style.background="rgba(255,255,255,0.0"+h*2.5+")";
navtext.style.color="rgba(66,66,66,0.0"+h*2.5+")";
back.style.background="rgba(255,255,255,0.0"+h*2.5+")";
back.style.fill="rgba(19,146,246,0.0"+h*2.5+")";
}elseif(h>10&&h<=42){
headerTop.style.background="rgba(255,255,255,0."+h*2.5+")";
headerTop.style.color="rgba(66,66,66,0."+h*2.5+")";
navtext.style.background="rgba(255,255,255,0."+h*2.5+")";
navtext.style.color="rgba(66,66,66,0."+h*2.5+")";
back.style.background="rgba(255,255,255,0."+h*2.5+")";
back.style.fill="rgba(19,146,245,0."+h*2.5+")";
}
}
};
</script>
