51工具盒子效果图：
话不多说上代码：
1.现在data内写上这个，我们的opacity值是要实时变动的，我们要让它先完全显示首先定值为1。
2.然后写一个方法，我们要感觉滚动条与顶部的距离来推算
handleScroll() {
const top = document.documentElement.scrollTop || document.body.scrollTop
if (top > 0) {
let opacity = 13 / top;
this.ss = opacity;
opacity = opacity < 0.1 ? 0 : opacity this.opacityStyle = {
opacity
}
}
if (top > 50) {
var ss = document.getElementById("book") ss.classList.add("ss");
} else if (top <= 50) {
var ss = document.getElementById("book") ss.classList.remove("ss");
}
},
后面是根据滚动条的位置来添加样式，可以忽略。
const top = document.documentElement.scrollTop||document.body.scrollTop，获取滚动条与顶部的位置，
let opacity = 13/top;这个我们可以获取动态值，只要top的数值改变，我们的 opacity 就是改变。13是可以根据自己的实际情况改变的，并非一定要13，我的这个是用mui+vue写的，是可以根据自己情况改变的 。
opacity = opacity < 0.1 ? 0 : opacity；到了一定的数值是可以变为0的。
3.这里是添加一个窗口监听
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
4.这里是添加一个窗口监听
unmounted() {
window.removeEventListener('scroll', this.handleScroll)
},
注意mounted，unmounted 这个是钩子函数，详情了解vue生命周期。
本文来自投稿，不代表本站立场，如若转载，请注明出处：https://www.ruletree.club/archives/2102/
