VUE实现网页中滚动鼠标时导航背景颜色透明度的改变
1、HTML<div id="topNav" :style="topNavBg">这里是导航内容</div>2、JSexport default {data () {return {topNavBg: {backgroundColor: ''}}},mounted () {window.addEventListener('scroll', this.handleScroll
·
1、HTML
<div id="topNav" :style="topNavBg">
这里是导航内容
</div>
2、JS
export default {
data () {
return {
topNavBg: {
backgroundColor: ''
}
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
},
methods: {
// 滚动页面时触发导航变色
handleScroll () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// 设置背景颜色的透明度
if (scrollTop) {
this.topNavBg.backgroundColor = `rgba(19, 23, 130,
${scrollTop / (scrollTop + 60)})` // scrollTop + 多少根据自己的需求设置
} else if (scrollTop === 0) {
this.topNavBg.backgroundColor = 'transparent' // 设置回到顶部时,背景颜色为透明
}
},
// 滚动之前重置
beforeDestroy () {
window.removeEventListener('scroll', this.handleScroll)
},
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)