vue实现吸顶效果

先看效果

 

第一步：html 中：

在你要实现吸顶效果的div上，加上如下这一行代码：

:class="{'is_fixed' : isFixed}"

第二步：data 定义中： 

data() {
    return {
        isFixed: false,
        offsetTop: 0,
        }
    }

第三步：在 mounted 与 destroyed 中

mounted() {
    window.addEventListener('scroll', this.initHeight);
    this.$nextTick(() => {
    //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
    this.offsetTop = document.querySelector('#boxFixed').offsetTop;
    })
},
//回调中移除监听
destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
},

第四步：在 methods 方法定义中：

initHeight() {
// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//如果被卷曲的高度大于吸顶元素到顶端位置 的距离
          this.isFixed = scrollTop > this.offsetTop ? true : false;
},

第五步：在css中：

1. .is_fixed{

2. width: 100%;

3. position: fixed;

4. top: 0;

5. z-index: 999;

6. }