vue的滚动scroll事件 实现某元素吸顶或者固定位置显示

参考文档 https://blog.csdn.net/qq_42221334/article/details/80969890

1、监听滚动事件
挂载前调用handleScroll方法
首先，在mounted钩子中给window添加一个滚动滚动监听事件，

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

2、 在methods中添加handleScroll方法 添加滚动事件
  到达固定的高度就改变 data中的isFixeds 的值

 data(){
        return{
            isFixeds:false,
        }
    },
handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  if (scrollTop > 178) {//提前判断要上升多少像素就固定
           this.isFixeds=true;
  } else {
    this.isFixeds = false;
  }
}

样式是

    .isFixed{
    position:fixed;
    width: 100%;
    background-color:#Fff;
    top:0;
    z-index:999;
  }

3、在上面进行判断，如果data中的isFixeds为true就显示isFixed样式

<div class="searchBar" :class="{isFixed:isFixeds==true}">
            <ul class="flex jc-sa ul1">
            <li>小区房源</li>
            <li>评论(0条)</li>
            <li>周边玩乐</li>
            <li>小区介绍</li>
        </ul>
            <ul class="flex jc-sa aic ul2">
                <li><span class="bright">别墅客栈</span></li>
                <li><span>特色公寓</span></li>
            </ul>
        </div>