ant-design/components/affix/index.en-US.md

31 lines
1.0 KiB
Markdown
Raw Normal View History

---
category: Components
type: Navigation
2016-09-21 11:28:38 +08:00
title: Affix
---
Make an element stick to viewport.
2016-09-10 13:43:30 +08:00
## When To Use
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-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.
## 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 | - |
| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
| 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>
```