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 |
| --- | --- | --- | --- |
| 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: sort api table

											
										
										
											2017-10-25 10:25:44 +08:00
+								| Property | Description | Type | Default |
-												:lipstick: prittier all files

											
										
										
											2019-05-07 14:57:32 +08:00
+								| --- | --- | --- | --- |
-												docs: Unify type naming (#4636)

* Unify name of ReactNode type in document

* Lowser all string type name

* Lowercase all number type name

* Lowercase all boolean type name

* Unify array type

* Lowercase all object type name

* Unify mutilple types

											
										
										
											2017-01-20 20:10:50 +08:00
+								| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
-												docs: sort api table

											
										
										
											2017-10-25 10:25:44 +08:00
+								| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
-												docs: fix target API of Affix and Badge

											
										
										
											2017-03-30 14:23:25 +08:00
+								| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
-												docs: sort api table

											
										
										
											2017-10-25 10:25:44 +08:00
+								| 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)