CSS实现div吸顶，页面滚动导航栏置顶

最近做了一个前端小需求，不论页面怎么样滑动，让进度条模块进行置顶显示；
找的方法都是通过使用监听形式，超过一定高度来使用position: fixed;还需要设置模块的高度才行，这个高度设置完之后，发现浏览器的窗口大小不一致，会导致置顶模块的高度也不一样，无法自适应。
发现可以使用position: sticky;top: 0;来实现
sticky是粘性定位，不超出视图就是relative，超出视图就是fixed；

.boxFixed {
  position: sticky;
  top: 0;
  z-index: 100;
}

  <div class="boxFixed">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>招标进度</span>
      </div>
      <div class="stepsFlag" v-loading="stepLoading">
        <el-steps align-center="true">
          <el-step
            v-for="item in sectionProgress"
            :key="'sectionProgress' + item.id"
            :title="item.stateName"
            :status="changeStatus(item)"
            :description="item.triggerTime == null ? '' : item.triggerTime"
            @click.native="stepClick(item)"
            class="stepIcon"
            :icon="changeIcon(item)"
          >
          </el-step>
        </el-steps>
      </div>
    </el-card>
  </div>

下图为实现效果