今天在做毕业设计的时候，想加一个经常都可以看到的视觉交互，如下图一样
这个效果在很多的页面都会有，所以应该是一个很经常要用到的功能，我做出来之后想分享出来给需要用到这个功能的朋友。
实现这个效果的代码网上有很多，当初我想实现的时候，也没直接在网上找，毕竟是前端资深菜鸟嘛，遇到需求了当然是第一时间自己想办法解决，实在实现不了再到网上找，这样有助于成长。
思路：
- 要实现这个功能，第一步就是要监听页面的滚动，直接上代码！
mounted() { //首先，在mounted钩子window添加一个滚动滚动监听事件 window.addEventListener("scroll", this.handleScroll); }, methods: { //然后在方法中，添加这个handleScroll方法来获取滚动的位置 handleScroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; let offsetTop = document.querySelector("#searchBar").offsetTop; } }, //由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错 beforeDestroy() { window.removeEventListener("scroll", this.handleScroll); }上面的代码中实现了监听一个id为 searchBar 的元素的滚动位置，这样可以完成了第一步。
- 第二步就是给页面添加改变事件；
我在项目中使用的是 Vant 的 搜索组件，所以我直接给它绑定了一个 background属性，如果是其他的组件也同理。
<van-search placeholder="输入公司或职位" @blur="onBlur" @focus="onFocus" show-action :background="backgroundColor" shape="round" > <div slot="action">搜索</div> </van-search>给组件绑定背景颜色属性之后，下面就需要使用滑动监听函数来改变背景颜色。
//设置背景颜色的透明读 if (offsetTop && scrollTop) { this.backgroundColor = `rgba(255, 255, 255,${scrollTop / (scrollTop + 40)})`; } scrollTop 是页面监听到到组件的滚动位置，当组件滚动的时候，scrollTop 的值就会改变，
this.backgroundColor = `rgba(255, 255, 255,${scrollTop / (scrollTop + 40)})`;
这个是动态的将 backgroundColor 属性进行设置改变。
前三个值（红绿蓝）的范围为0到255之间的整数。如果你最终想要将背景变为其他颜色，那么你可以在上面写上对应的 rgb 颜色的数值，现在重点说一下 rgba 的最后一个值。
第四个值，alpha值，制订了色彩的透明度/不透明度，它的范围为0.0到1.0之间，0.5为半透明。 ，也就相当于 css 中的 opacity 属性。 rgba(255,255,255,0)则表示完全透明的白色； rgba(255,255,255,1)则表示完全不透明的白色，就相当于本色；颜色值可以根据对应的值来设置。
${scrollTop / (scrollTop + 40)根据模版字符串的属性，给rgba添加第四个动态值，每个滑动的屏幕都不一样，所以可以根据自己的需求来计算对应的值。我这里的计算为，每次滑动产生的距离除以滑动产生的距离，如果就是这样的话会导致一个问题，如果我滑动的位置是10，那么10除以10得到的就是0，也就是说不管滑动多少最终都是透明的，所以我给它加上了40。这样做可以确保每次滑动的值，都不会大于1或小于0，比如 10/(10+40) = 0.2，100/(100+40) = 0.714； 当滚动的位置越多，数值就会越往 1 靠近，最终滚动距离大于自身距离就会设置为完全不透明。
最终就实现了这个效果。
但是但是但是。。。。
作为一个优秀的前端打字员，我在多次进行滑动的时候，发现了一个问题。
在页面快速滑动的时候，到后面出现了 bug ，顶部搜索栏在页面没有向上滑动的情况下，还是显示了背景，这样的结果，无疑是让人痛恨的。那怎么办呢，
在页面向上滚动过快的时候，也就是回到原点的时候，应该将 背景颜色设置为原来的属性，即
//设置背景颜色的透明读 if (offsetTop && scrollTop) { this.backgroundColor = `rgba(255, 255, 255,${scrollTop / (scrollTop + 40)})`; } else if (scrollTop == 0) { this.backgroundColor = "transparent"; } 当页面回到了顶部，也就是说 scrollTop 为0的时候，将backgroundColor重置为 transparent ，就这样，这个效果就完全实现了。
下面放全部代码👇
mounted() { //首先，在mounted钩子window添加一个滚动滚动监听事件 window.addEventListener("scroll", this.handleScroll); }, methods: { //然后在方法中，添加这个handleScroll方法来获取滚动的位置 handleScroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; let offsetTop = document.querySelector("#searchBar").offsetTop; //设置背景颜色的透明读 if (offsetTop && scrollTop) { this.backgroundColor = `rgba(255, 255, 255,${scrollTop / (scrollTop + 40)})`; } else if (scrollTop == 0) { this.backgroundColor = "transparent"; } } }, //由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错 beforeDestroy() { window.removeEventListener("scroll", this.handleScroll); }第一次写文章，如果对你有帮助，就请点个赞；如果写得不好的地方请评论，因为这样对我有帮助。
谢谢！！
