2016-07-10 08:56:02 +08:00
|
|
|
---
|
|
|
|
|
category: Components
|
2016-11-09 14:43:32 +08:00
|
|
|
type: Navigation
|
2016-09-21 11:28:38 +08:00
|
|
|
title: Affix
|
2016-07-10 08:56:02 +08:00
|
|
|
---
|
|
|
|
|
|
2017-09-08 09:40:40 +08:00
|
|
|
Make an element stick to viewport.
|
2016-07-10 08:56:02 +08:00
|
|
|
|
2016-09-10 13:43:30 +08:00
|
|
|
## When To Use
|
2016-07-10 08:56:02 +08:00
|
|
|
|
2016-11-29 17:13:24 +08:00
|
|
|
When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions.
|
2016-07-10 08:56:02 +08:00
|
|
|
|
2016-11-29 17:13:24 +08:00
|
|
|
Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
|
2016-07-10 08:56:02 +08:00
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
2017-10-25 10:25:44 +08:00
|
|
|
| Property | Description | Type | Default |
|
|
|
|
|
| -------- | ----------- | ---- | ------- |
|
2017-01-20 20:10:50 +08:00
|
|
|
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
|
2017-10-25 10:25:44 +08:00
|
|
|
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
|
2017-03-30 14:23:25 +08:00
|
|
|
| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
|
2017-10-25 10:25:44 +08:00
|
|
|
| onChange | Callback for 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>
|
|
|
|
|
```
|
