uniapp实现导航栏随着滚动淡入淡出效果

实现思路:默认导航栏其实一直存在,只需初始时把导航栏透明度设为0,随着滚动,改变透明度即可

onPageScroll(res) {
	//获取距离顶部距离
	const scrollTop = res.scrollTop;
	if (scrollTop >= 0) {
		// 导航条颜色透明渐变
		if (scrollTop <= 20) {
			this.opacityNum = 0
		} else if (20 < scrollTop && scrollTop <= 100) {
			this.opacityNum = scrollTop / 100
		} else if (scrollTop > 100) {
			this.opacityNum = 1
		}
	}
},

你可能感兴趣的:(前端,vue.js,javascript)