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

---
category: Components
type: Navigation
title: Affix
---

Make an element stick to viewport.

## When To Use

When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions.

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 | Version |
| --- | --- | --- | --- | --- |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |  |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |  |
| target | specifies the scrollable area dom node | () => HTMLElement | () => window |  |
| onChange | Callback for when affix state is changed | Function(affixed) | - |  |

**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>
```

## 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>

Related issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
-												docs: translate affix to english (#1471) (#2219)


											
										
										
											2016-07-10 08:56:02 +08:00
+								---
 								category: Components
-												docs: 调整组件导航结构 (#3758)

- Layout 更名为 Grid
											
										
										
											2016-11-09 14:43:32 +08:00
+								type: Navigation
-												docs: update docs details

											
										
										
											2016-09-21 11:28:38 +08:00
+								title: Affix
-												docs: translate affix to english (#1471) (#2219)


											
										
										
											2016-07-10 08:56:02 +08:00
+								---
-												docs: update Affix English doc (#7488)

Fixed minor typos.
											
										
										
											2017-09-08 09:40:40 +08:00
+								Make an element stick to viewport.
-												docs: translate affix to english (#1471) (#2219)


											
										
										
											2016-07-10 08:56:02 +08:00
-												Fix doc headings

											
										
										
											2016-09-10 13:43:30 +08:00
+								## When To Use
-												docs: translate affix to english (#1471) (#2219)


											
										
										
											2016-07-10 08:56:02 +08:00
-												docs: improve docs' detail (#4050)


											
										
										
											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.
-												docs: translate affix to english (#1471) (#2219)


											
										
										
											2016-07-10 08:56:02 +08:00
-												docs: improve docs' detail (#4050)


											
										
										
											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.
-												docs: translate affix to english (#1471) (#2219)


											
										
										
											2016-07-10 08:56:02 +08:00
 								## API
-												docs: show version Number features were added (#17373)

* docs: add api first appearance

* docs: fix auto-complete doc

* docs: replace Version Added with Version

* docs: date picker common method

* docs: date picker common method

* docs: tree

* docs: remove meaningless 3.0.0

											
										
										
											2019-07-11 14:14:33 +08:00
+								| Property | Description | Type | Default | Version |
 								| --- | --- | --- | --- | --- |
 								| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |  |
 								| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |  |
 								| target | specifies the scrollable area dom node | () => HTMLElement | () => window |  |
 								| onChange | Callback for when affix state is changed | Function(affixed) | - |  |
-												docs: update docs of Affix

											
										
										
											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
-												:lipstick: prittier all files

											
										
										
											2019-05-07 14:57:32 +08:00
+								<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
-												docs: update docs of Affix

											
										
										
											2016-09-10 12:45:33 +08:00
+								```
-												docs: Add FAQ of Affix window scroll (#16125)

* update doc

* Update index.en-US.md

* update desc

											
										
										
											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>
 								Related issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)