vue监听滚动事件 实现某元素随着滚动条滚动固定距离顶部的某个位置（元素的top值实时变化）

HTML

<div class="fixed"  id="searchBar">
</div>

CSS

fixed {
  position: fixed;
  bottom: 100px;
  top: 300px;/*开始处于距离顶部300px的位置，之后随着滚动条滚动top值改变，然后在top==100时停止*/
  left: 218px;
  box-sizing: border-box;
  z-index: 2;
}

VUE

mounted () {//给window添加一个滚动滚动监听事件
  window.addEventListener('scroll', this.handleScroll)
},

methods: {
  handleScroll () { //改变元素#searchBar的top值
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var offsetTop = document.querySelector('#searchBar').offsetTop;

    if(scrollTop<=200){
      offsetTop = 300 - Number(scrollTop);
      document.querySelector('#searchBar').style.top = offsetTop+'px';
    }else{
      document.querySelector('#searchBar').style.top = '100px';
    }
  },
},
destroyed () {//离开该页面需要移除这个监听的事件
  window.removeEventListener('scroll', this.handleScroll)
},

补充—–+2018-08-07+——

iView有个组件也可实现上述功能：Affix 图钉

参考文献：https://blog.csdn.net/wang1006008051/article/details/78003974