vue中的顶部导航渐变

vue中的顶部导航渐变

 mounted() {
        window.addEventListener("scroll", this.handleScroll);
}
//由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错
beforeDestroy() {
        window.removeEventListener("scroll", this.handleScroll);
},
methods: {
    handleScroll() {
            let scrollTop =
                window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            let offsetTop = document.querySelector("#searchBar").offsetTop;
            //设置背景颜色的透明读
            if (scrollTop) {
                this.linkObj.bag = `rgba(2, 150, 247,${scrollTop / (scrollTop + 43.88)})`;
            } else if (scrollTop == 0) {
                this.linkObj.bag = "transparent";
            }
        }
}
// rem下获取顶部高度   document.getElementById("id").offsetHeight