mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 19:50:05 +08:00
fb0b4f0fc9
* 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
1.4 KiB
1.4 KiB
| category | type | title |
|---|---|---|
| Components | Navigation | 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:
<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