vue 实现滚动时,toolbar的背景色从渐变到白色

首先在id="toolbar"的内联样式中先定义style="background:linear-gradient(top,#000,#fff);"

export default{
  data(){
    return {
      offsetTop:0
    }
  },
   mounted(){
      var toolbar=document.getElementById("toolbar") 
      window.addEventListener('scroll',()=>{
        this.offsetTop=window.pageYOffset || document.documentElement.scrollTop ||         document.body.scrollTop
        console.log(this.offsetTop);
        if (this.offsetTop>320) {
          toolbar.style.background="#fff"
        }else{
          toolbar.setAttribute("style","background:linear-gradient(top,#000,#fff)")
        }
      },true);
  }
  
}

你可能感兴趣的:(vue 实现滚动时,toolbar的背景色从渐变到白色)