美文网首页
vue 实现滚动时,toolbar的背景色从渐变到白色

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

作者: 真是个非常帅气的昵称呢 | 来源:发表于2018-11-22 14:11 被阅读0次

    首先在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的背景色从渐变到白色

          本文链接:https://www.haomeiwen.com/subject/uudlqqtx.html