js实现导航栏随着页⾯向下滑动逐渐显⽰，向上滑动逐渐隐藏⼀、html代码
<!-- 导航栏 -->
<nav id="dao">
<x-icon type="ios-arrow-back" size="30" class="cell-back" id="cell-back"></x-icon>
<h4 id="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>
var h = document.documentElement.scrollTop || document.body.scrollTop;
console.log(h * 2.5);      //控制台查看监听滚动
var headerTop = ElementById("dao");//获取导航栏id
var navtext = ElementById("navtext");//获取导航栏中的⽂字id
var back = ElementById("cell-back");//获取导航栏中的返回图标icon id      if (h >= 42) {      //header的⾼度是40px;
headerTop.style.background = "#fff";
lor = "rgba(66,65,66,1)";
// 设置导航栏中的⽂字样式
navtext.style.background = "#fff";
lor = "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 + ")";
lor = "rgba(66,66,66,0.0" + h * 2.5 + ")";
navtext.style.background = "rgba(255,255,255,0.0" + h * 2.5 + ")";
js导航栏下拉菜单lor = "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 + ")";
} else if (h > 10 && h <= 42) {
headerTop.style.background = "rgba(255,255,255,0." + h * 2.5 + ")";          lor = "rgba(66,66,66,0." + h * 2.5 + ")";
navtext.style.background = "rgba(255,255,255,0." + h * 2.5 + ")";
lor = "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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。