因为代码是我自己要看的 所以我自己看得懂就好了哈哈~直接上代码(有注释)
<template>
<div>
<div class="header" :style="{background:color}">
header
</div>
<div class="banner" id="searchBar">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data()
{
return{
color:"pink"
}
},
mounted() {
//首先,在mounted钩子window添加一个滚动滚动监听事件
window.addEventListener("scroll", this.handleScroll);
},
methods: {
//然后在方法中,添加这个handleScroll方法来获取滚动的位置
handleScroll() {
let scrollTop =
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let offsetTop = document.querySelector("#searchBar").offsetTop;
//设置背景颜色的透明读
if (offsetTop && scrollTop) {
this.color = `rgba(255, 255, 255,${scrollTop / (scrollTop + 40)})`;
} else if (scrollTop == 0) {
this.color = "white";
}
else if(scrollTop != 0)
{
this.color = "yellow";
}
}
},
//由于是在整个window中添加的事件,所以要在页面离开时摧毁掉,否则会报错
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll);
}
}
</script>
<style lang="scss" scoped>
.banner{
width: 100%;
height: 500px;
background: red;
}
.header{
width: 100%;
height: 40px;
background: white;
position: fixed;
left: 0;
top: 0;
}
</style>
这种案例还是挺常见的比如在苏宁App上面