<template>
  <div class="demo-affix-target">
    <div
      ref="target"
      class="affix-scroll-target">
      <div class="affix-scroll-content">
        <div>Block start.</div>
        <div>Block end.</div>
      </div>
      <ui-affix
        :fixed-bottom="0"
        :fixed-top="0"
        :target="target"
        position="absolute">
        <ui-button type="primary">
          FIXED
        </ui-button>
      </ui-affix>
      <div class="affix-scroll-content">
        <div>Block start.</div>
        <div>Block end.</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Affix, Button } from "amumu-ui"

export default {
  components: {
    "ui-affix": Affix,
    "ui-button": Button,
  },
  methods: {
    target() {
      return this.$refs.target
    },
  },
}
</script>

<style lang="scss">
.demo-affix-target {
  .affix-scroll-target {
    max-height: 200px;
    overflow-y: auto;
    position: relative;
    .affix-scroll-content {
      height: 500px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>
