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
---
2019-10-28 09:09:22 +08:00
Wrap Affix around another component to make it stick the 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
2019-10-28 09:09:22 +08:00
On longer web pages, its helpful for some content 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
2019-11-21 10:24:22 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |
| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |
| 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
2019-10-28 09:09:22 +08:00
**Note:** Children of `Affix` must not have the property `position: absolute` , but you can set `position: absolute` on `Affix` itself:
2016-09-10 12:45:33 +08:00
```jsx
2019-05-07 14:57:32 +08:00
< Affix style = {{ position: ' absolute ' , top: y , left: x } } > ...< / Affix >
2016-09-10 12:45:33 +08:00
```
2019-04-17 10:19:57 +08:00
## FAQ
### Affix bind container with `target`, sometime move out of container.
We don't listen window scroll for performance consideration. You can add listener if you still want: < https: / / codesandbox . io / s / 2xyj5zr85p >
2019-10-28 09:09:22 +08:00
Related issues： #5642 ](https://github.com/ant-design/ant-design/issues/5642 ) [#16120 ](https://github.com/ant-design/ant-design/issues/16120 )
