vue+vant导航条背景透明度随着滚动高度而改变
项目的需求是顶部导航条刚打开背景是透明的，随着首页滚动的高度慢慢渐变，滚动到一定高度的时候，透明度从0加到1。但是导航条的左右按钮图标都是全程不透明的。
如图所示，
一开始给监听window的滚动事件，都不起作用，并且该元素及其父元素也并没有overfolw：hidden的样式。
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll, true);
}
就是一直捕获不到滚动事件，并且document.documentElement.scrollTop滚动高度也获取不到，一直为0。 后来发现，只需要给要滚动的元素加overflow-y: scroll;样式就可以捕获滚动事件了。之前其实生成滚动事件的并不是home元素，而是他的父元素。
具体实现步骤：
1.给要滚动的页面元素加overflow-y: scroll样式；
2.给要滚动的页面元素加滚动事件@scroll="scrollHome"；
3.给要滚动的页面元素加ref="home"用来获取滚动高度；
4.给导航条加:style="style"用来绑定导航条样式；
5.给数据项加opacity: 0用来存储导航条背景透明度；
6.在滚动事件里实现透明度和样式的绑定，其中透明度由滚动的高度决定。
实现代码如下，
home.vue
<template>
<div class="home" ref="home" @scroll="scrollHome">
<!-- 顶部蒙层 -->
<van-nav-bar
class="header"
:style="style"
fixed
:border="false"
@click-left="onClickLeft"
@click-right="onClickRight">
<template #left>
<span style="color: #fff;">{{shopName}} </span><van-icon name="star" color="yellow" size="10" >3.31</van-icon>
</template>
<template #right>
<van-icon name="chat-o" badge="99+" size="25" color="#fff"/>
</template>
</van-nav-bar>
</div>
</template>
...
data() {
return {
style: {}, // 头部样式
opacity: 0,
shopName: '啦啦啦'
};
},
...
methods:{
scrollHome () {
this.opacity = Math.abs(Math.round(this.$refs.home.scrollTop)) / 200;
this.style = { background: `rgba(231, 55, 54,${this.opacity})` };
}
}
...
<style lang="scss" scoped>
.home{
width: 100%;
height: 100%;
font-size: 24px;
background-color: #eee;
overflow-y: scroll;
.header {
box-shadow: none;
background:rgba($color: #E73736, $alpha: 0);
}
</style>
