mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
882cec62d6
* docs: Add components overview page * fix detail * remove ContributorsList form overview page * fix components url * improve code style * remove extra file * fix detail * fix lint * fix lint * docs: Finish components overview page * fix lint * docs: Update cover * fix lint * update cover * update menu * improve overview page * refactor code * fix order * update title * add components count * fix overview page ssr bug * move less file * update title margin Co-authored-by: arvinxx <arvinx@foxmail.com>
38 lines
1.5 KiB
Markdown
38 lines
1.5 KiB
Markdown
---
|
||
category: Components
|
||
type: Navigation
|
||
title: Affix
|
||
cover: https://gw.alipayobjects.com/zos/alicdn/SQGCQ7gOO/Affix.svg
|
||
---
|
||
|
||
Wrap Affix around another component to make it stick the viewport.
|
||
|
||
## When To Use
|
||
|
||
On longer web pages, its helpful for some content 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 | 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) | - |
|
||
|
||
**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
|
||
|
||
```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 issues：[#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)
|