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

最新推荐文章于 2025-02-24 10:30:00 发布

咔布哩

最新推荐文章于 2025-02-24 10:30:00 发布

阅读量2.4k

点赞数 1

分类专栏： VUE + Element 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/royya_buli/article/details/127222004

版权

VUE + Element 专栏收录该内容

2 篇文章

订阅专栏

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)
    	},
	}
}