# Affix 固钉

将页面元素固钉在可视区域。

## 使用场景

内容区过长，将目标元素固定在可视区域

## 案例演示

### Affix 固定基本使用

---demo
```js
import { Affix, Button } from 'amos-framework';

ReactDOM.render((
  <div>
    <Affix>
      <Button color="pink">固定在顶部</Button>
    </Affix>
    <Affix offsetBottom={285}>
      <Button>固定在距离底部 285px 的位置</Button>
    </Affix>
    <Affix offsetTop={200}>
      <Button color="orange">固定在距离顶部 200px 的位置</Button>
    </Affix>
    <Affix offsetTop={100} onChange={affixed => console.log(affixed)}>
      <Button color="green">固定在距离顶部 100px 的位置</Button>
    </Affix>
  </div>
), _react_runner_);
```
---demoend

### Affix 参考对象

用 `getTarget` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。

---demo
```js
import { Affix, Button } from 'amos-framework';

const gridBgStyle = {
  height: '400px',
  backgroundImage: 'linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%)',
  backgroundSize: '50px 50px',
  letterSpacing: '5px'
};

ReactDOM.render((
<div style={{ height: 133, overflow: 'hidden' }}>
  <div style={{ height: '100%', overflowY: 'scroll' }} id="affix-target-demo">
    <div style={gridBgStyle}>
      <br />
      <br />
      <br />
      <Affix getTarget={() => document.getElementById('affix-target-demo')} offsetTop={20}>
        <Button>固定在容器顶部</Button>
      </Affix>
    </div>
  </div>
</div>
), _react_runner_);
```
---demoend

## API

|name|type|default|description|
|------|------|------|-------|
| prefixCls | String | `amos-affix` | 自定义样式前缀   |
| className | String | - | 自定义样式名   |
| style | Object | - | 自定义内联样式   |
| children | ReactNode | - | 被固定的内容区   |
| offsetTop | Number | - | 距离窗口顶部达到指定偏移量后触发   |
| offsetBottom | Number | - | 距离窗口底部达到指定偏移量后触发   |
| getTarget | Function | `() => window` | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 |
| onChange | Function | - | 固定状态改变时触发的回调函数   |