mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 11:39:28 +08:00
d44f404eae
* chore: improve sort api table scripts * sort api * add ignore * Revert "sort api" This reverts commit 343505d5f09d69349ce1fbdaea2a9faa7e852207. * sort api * Update package.json * sort api * Delete sort-api.js * sort api * sort api * sort api * fix * Update index.zh-CN.md * fix input-number * fix input-number * sort func * fix * Method moved to the end * carousel method
1.5 KiB
1.5 KiB
| category | type | title | cover |
|---|---|---|---|
| Components | Navigation | Affix | https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/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:
<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