el-card+el-col实现吸顶效果

今天需要完成的功能为el-card和el-col实现吸顶的效果，首先el-col布局时自适应的，如果只是设置el-card的fixed布局的时候，则需要给外层套一个固定的高度盒子，不然不会占据位置的，让外层的盒子主要占据位置，

思路大致为：实现吸顶就是给el-card设置定位为fixed的，然后要解决的时自适应的问题，随着窗口el-card的跨度也要跟随增加，或者减少，

因此我们首先要搞定的是el-card的宽度，这里我是直接操纵的dom元素，其中参考的大佬的代码

 如果看不懂，也可以直接参考这个大佬的代码，以下是我的项目代码的结构

 接下来时js部分

 

// 首次初始化方法
    startinit(){
    this.colWidth = document.getElementById("colWidth").offsetWidth;
    this.offsetWidth = this.colWidth-15;
    document.getElementById("fixed-card").style.width = this.offsetWidth+'px'
    },
    initHeight() {
      //兼容性，获取页面滚动距离
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      //判断滚动距离是否大于元素到顶端距离
      this.fixed = scrollTop > this.offsetTop ? true : false;
      //宽度赋值
      document.getElementById("fixed-card").style.width = this.offsetWidth + 'px'
    },

 

 

 以上就是我遇到业务以及处理的结果，因为做项目中不仅要考虑是否可用，还需要考虑到适配性，写完可以适当调整一下分辨率，看下在不同的电脑之下，是否写的代码是否适用呢