@阿乐今天敲代码没

效果图

好几天没更新了，做一个小demo吧。导航栏吸顶，以及随页面滚动实现渐变色

吸顶前：

吸顶后：

滚动渐变色：

一、实现

html：

<div class="nav" :class="navBarFixed == true ? 'navBarWrap' :''" :style="style">

Vue中data内容：

data() {return {navBarFixed: false,style: {},opacity: 0,}}

Vue中方法

methods: {watchScroll() {//滚动距离var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;// 当导航栏滚动距离大于头部图片高度实现吸顶效果if (scrollTop > 799 ) {//为导航栏加上navBarFixed类，实现透明度随滚动改变，并且吸顶改变导航栏样式this.navBarFixed = true;this.opacity = Math.abs(Math.round(scrollTop)) / 3300;this.style = {background: `linear-gradient(to right,green,rgba(26, 212, 115,${this.opacity})`} } else {this.navBarFixed = false;this.style='';}},

添加监听事件，监听滚动距离

mounted() {window.addEventListener("scroll", this.watchScroll);},

记得跳转页面销毁监听事件，否则会影响其他页面

beforeRouteLeave(to, from, next) {window.removeEventListener('scroll', this.watchScroll);next();},