CSS相关

手机屏幕向下滑动,banner改变样式

<!-- HTML -->
<div class="banner" :class="{'active' : headerScroll }"> banner </div>

/* CSS */
 .banner {       
   position: fixed;      
   left: 0;      
   top: 0;      
   height: 50px;      
   width: 100%;      
   line-height: 50px;      
   padding: 0 15px;      
   box-sizing: border-box;      
   font-size: 15px;      
   z-index: 10000;      
   text-align: center;
 } 
.active {   
  background: red;  
}
/* JS(vue) */
data(){    
    return {     
      headerScroll:false, // 是否加载新的样式     
      timeoutRef:null  // 优化一下用户滚动的事件 , 不频发触发 , 防抖处理    
  } 
},
created(){ // 添加事件句柄     
     window.addEventListener('scroll', () => {          
     clearTimeout(this.timeoutRef);          
     this.timeoutRef = setTimeout(this.getValue,500)      
   })  
}
methods:{     
  getValue(){ //专门用来读取的滚动的距离 , 滑动多少距离 , 改变样式 ,可以根据自己的需求再改(本例为100px)        
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop        
     scrollTop > 100 ? this.headerScroll = true : this.headerScroll = false    
  }
}