2016-07-10 08:56:02 +08:00
|
|
|
---
|
|
|
|
|
category: Components
|
|
|
|
|
type: Other
|
2016-09-21 11:28:38 +08:00
|
|
|
title: Affix
|
2016-07-10 08:56:02 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
Make an element sticky to viewport.
|
|
|
|
|
|
2016-09-10 13:43:30 +08:00
|
|
|
## When To Use
|
2016-07-10 08:56:02 +08:00
|
|
|
|
|
|
|
|
When user browses a long web page, some content need to sticky to viewport. It is common for menus and actions.
|
|
|
|
|
|
|
|
|
|
Please note that Affix should not cover other content in page, especially when the size of viewport is small.
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
| Property | Description | Type | Default |
|
|
|
|
|
|--------------|-----------------------|----------|--------------|
|
|
|
|
|
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
|
|
|
|
|
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
|
|
|
|
|
| onChange | Callback when affix state is changed | Function(affixed) | - |
|
2016-09-10 12:45:33 +08:00
|
|
|
|
|
|
|
|
**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
<Affix style={{ position: 'absolute', top: y, left: x}}>
|
|
|
|
|
...
|
|
|
|
|
</Affix>
|
|
|
|
|
```
|
