# 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>

# API

# Options

参数	说明	类型	默认值
offset-bottom	距离窗口底部达到指定偏移量后触发	Number	—
offset-top	距离窗口顶部达到指定偏移量后触发	Number	—
on-affix	固定状态改变时触发的回调函数	Function(affixed)	—