vue 根据滚动条位置实现逐渐影藏逐渐显示动画效果

效果图：




话不多说上代码：
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生命周期。