vue监听页面滚动,动态修改导航条颜色,过渡效果
<template><div class="header" :style="style"></div></template><script>export default {data() {return {style: {},opacity: 0,}},mounted() {window.addEventListener("scroll",
·
<template>
<div class="header" :style="style">
</div>
</template>
<script>
export default {
data() {
return {
style: {},
opacity: 0,
}
},
mounted() {
window.addEventListener("scroll", this.windowScroll); //监听页面滚动
},
methods: {
windowScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.opacity = Math.abs(Math.round(scrollTop)) / 250;
this.style = {background: `rgba(0, 0, 0,${this.opacity})`}
},
},
destroyed() {
window.removeEventListener("scroll", this.windowScroll); //销毁滚动事件
}
}
</script>
更多推荐
已为社区贡献15条内容
所有评论(0)