<style>
  .demo-kc-affix{
    display: inline-block;
    color: #fff;
    padding: 10px 30px;
    text-align: center;
    background: rgba(0,153,229,.9);
  }
</style>
<script>
  export default {
  	data () {
  		return {
  			scrollbars: ''
  		}
  	},
         mounted () {
           this.scrollbars = document.getElementsByClassName('kc-scrollbar__wrap')[0];
         }
  }
</script>
## Affix 固钉
--------------------

### 基本用法

简单使用，当元素不可见时，直接固定在最顶端。

:::demo
```html
<kc-affix :target="scrollbars">
  <span class="demo-kc-affix">固定在最顶部</span>
</kc-affix>
<script>
  export default {
  	data () {
  		return {
  			scrollbars: ''
  		}
  	},
	 mounted () {
	   this.scrollbars = document.getElementsByClassName('kc-scrollbar__wrap')[0];
	 }
  }
</script>
```
:::

### 顶部偏移

:::demo
```html
<kc-affix :target="scrollbars" :offset-top="100">
  <span class="demo-kc-affix">固定在距离顶部 100px 的位置</span>
</kc-affix>
<script>
  export default {
  	data () {
  		return {
  			scrollbars: ''
  		}
  	},
	 mounted () {
	   this.scrollbars = document.getElementsByClassName('kc-scrollbar__wrap')[0];
	 }
  }
</script>
```
:::

### 底部偏移

:::demo
```html
<kc-affix :target="scrollbars" :offset-bottom="50">
  <span class="demo-kc-affix">固定在距离底部 50px 的位置</span>
</kc-affix>
<script>
  export default {
  	data () {
  		return {
  			scrollbars: ''
  		}
  	},
	 mounted () {
	   this.scrollbars = document.getElementsByClassName('kc-scrollbar__wrap')[0];
	 }
  }
</script>
```
:::

### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| **title** | 标题，**必选参数** | string | — | — |
| offset-top | 距离窗口顶部达到指定偏移量后触发 | Number | — | 0 |
| offset-bottom | 距离窗口底部达到指定偏移量后触发 | Number | — | — |
| target | 设置Affix需要监听其滚动事件的元素，值为一个DOM元素(在本组件的案例中的target全部为scrollbar，因为本站滚动不是相对的window，而是kc-scrollbar) | HTMLElement | — | window |
