【vue】vue实现滚动到顶部吸附_vue列表 顶部吸附

前言

转载：https://www.cnblogs.com/leiting/p/10337313.html

实现

• html

<!--如果isFixed为true的话，就添加class is_fixed 设置固定定位-->
<div id="boxFixed" :class="{'is_fixed' : isFixed}">  
      这个是要滚动到顶部吸附的元素
</div>
1
2
3
4

• js

mounted(){
    window.addEventListener('scroll',this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
},

// method方法
handleScroll(){
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
    let offsetTop = document.querySelector('#boxFixed').offsetTop;  // 要滚动到顶部吸附的元素的偏移量
    this.isFixed = scrollTop > offsetTop ? true : false;  // 如果滚动到顶部了，this.isFixed就为true
}
1
2
3
4
5
6
7
8
9
10

• css 这个自己根据实际情况来调整

.is_fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
    padding-bottom: 20px;
  }
1
2
3
4
5
6
7

• data

data(){return isFixed:false} 
1