在methods写一个函数
ChangeOpacity() {
// 获取滚动像素
const scrollTop =
document.body.scrollTop || document.documentElement.scrollTop
// 获取屏幕高度
const vmHeight = window.innerHeight
// 修改opacity值
this.opacity = Math.abs(Math.round(scrollTop)) / vmHeight
// 修改style
this.style = {
'background-color': 'rgba(255,255,255,' + this.opacity + ')',
}
},
在mounted写注册监听
mounted() {
window.addEventListener('scroll', this.ChangeOpacity)
},
完整代码 这样子就可以滚动修改hader的透明度
<div class="header" :style="style"></div>
data() {
return {
style: {},
opacity: 0,
}
},
methods:{
ChangeOpacity() {
// 获取滚动像素
const scrollTop =
document.body.scrollTop || document.documentElement.scrollTop
// 获取屏幕高度
const vmHeight = window.innerHeight
// 修改opacity值
this.opacity = Math.abs(Math.round(scrollTop)) / vmHeight
// 修改style
this.style = {
'background-color': 'rgba(255,255,255,' + this.opacity + ')',
}
},
},
mounted() {
window.addEventListener('scroll', this.ChangeOpacity)
},
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
喜欢就支持一下吧