vue实现网页中滚动鼠标时改变导航栏背景颜色

1、HTML

<div id="topBannerNav" :style="topBannerNavBg">导航栏部分</div>

2、JS

export default {data () {return {topBannerNavBg: {backgroundColor: ''}}},mounted () {window.addEventListener('scroll', this.handleScroll) // 监听页面滚动},methods: {// 滚动页面时触发导航变色handleScroll () {let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop// 设置背景颜色的透明度if (scrollTop) {this.topBannerNavBg.backgroundColor = '#1e232f' // scrollTop + 多少根据自己的需求设置} else if (scrollTop === 0) {this.topBannerNavBg.backgroundColor = 'transparent' // 设置回到顶部时，背景颜色为透明}},// 滚动之前重置beforeDestroy () {window.removeEventListener('scroll', this.handleScroll)},}}