vue监听滚动事件，元素顶部吸附实现

需求：头部搜索模块默认如下图1，但是当滚动条移动到下方看不见导航栏时，需要将搜索模块简化并吸附到顶部如下图2

图1：

图2：

 解决方案：监听滚动事件，通过给搜索模块顶级元素增减class来切换样式

html和css:

  
      这个是要滚动到顶部吸附的元素



js方法:通过scroll监听页面滚动


 data: function() {
       return {
        isFixed:false //默认为false
      }

mounted(){
    window.addEventListener('scroll',this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
},
handleScroll(){
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
    let offsetTop = document.querySelector('#boxFixed').offsetTop;  // 要滚动到顶部吸附的元素的偏移量
    this.isFixed = scrollTop > offsetTop+100 ? true : false;  // 如果滚动到了预定位置，this.isFixed就为true，否则为false
}