# Affix 固钉

<template>
  <section class="demo-wrapper">
    <w-affix :offsetTop="80">
      <w-button type="primary" @click="scrollTop">
        置于顶部
      </w-button>
    </w-affix>
    <div class="div-container"></div>
    <w-affix :onAffix="fixedChange" :offsetBottom="0">
      <w-button type="primary">置于底部</w-button>
    </w-affix>
  </section>
</template>
<script>
  export default {
    methods:{
      fixedChange (status) {
        console.log('当前状态'+ status)
      },
      scrollTop () {
        window.scrollTo(0, 600)
      }
    }
  }
</script>

<style scoped lang="scss">
  .div-container {
    width: 100%;
    height: 1000px;
    margin: 10px 0;
    background-image: linear-gradient(
      45deg,
      #aaa 25%,
      transparent 25%,
      transparent 75%,
      #aaa 75%,
      #aaa
    ),
    linear-gradient(
      45deg,
      #aaa 25%,
      transparent 25%,
      transparent 75%,
      #aaa 75%,
      #aaa
    );
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
  }
</style>