<template>
  <div class="sticky-container">
    <vab-sticky :sticky-top="100">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="150">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="200">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="250">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="300">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="350">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="400">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="450">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="500">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="550">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="600">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <vab-sticky :sticky-top="650">
      <el-alert title="我会吸附" type="success" :closable="false"></el-alert>
    </vab-sticky>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
    <div>sticky</div>
  </div>
</template>

<script>
  import VabSticky from "@/components/VabSticky";

  export default {
    name: "Sticky",
    components: { VabSticky },
    data() {
      return {
        time: "",
        url: "",
        platforms: ["a-platform"],
        platformsOptions: [
          { key: "a-platform", name: "platformA" },
          { key: "b-platform", name: "platformB" },
          { key: "c-platform", name: "platformC" },
        ],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
      };
    },
  };
</script>
<style lang="scss" scoped>
  .sticky-container {
    div {
      height: 40px;
      line-height: 40px;
    }
  }
</style>