vue屏幕滚动部分吸顶效果

1.监听滚动事件

mounted () {
  window.addEventListener('scroll', this.handleScroll)
},

2.在methods中添加方法

handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  var offsetTop = document.querySelector('#searchBar').offsetTop
  if (scrollTop > offsetTop) {}
},

3.css

 {
    position:fixed;
    background-color:#Fff;
    top:0;
    z-index:999;
  }

4.离开页面移除监听

destroyed () {
  window.removeEventListener('scroll', this.handleScroll)
},

方法二

使用粘性布局(比较简单) 但最近的父级元素需要有固定的宽高

{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 9;
}