2ee3d43534
* style: affix & util * feat(alert): add customIcon slot * feat(anchor): ts type * style: auto-complete * feat: avatar add crossOrigin & maxPopoverTrigger * style(backTop): v-show instead v-if * style: badge * style: breadcrumb * feat: button add global size * feat: update i18n * feat: picker add disabledTime * test: update snap * doc: update img url * style: fix Card tabs of left position * doc: update cascader doc * feat: collapse * style: comment * style: configprovider * feat: date-picker add soem icon slot * style: update descriptions style * feat: add divider orientationMargin * doc: update drawer * feat: dropdown add destroyPopupOnHide & loading * style: update empty * feat: form add labelWrap * style: update grid * test: update grid snap * fix: image ts error * fix: mentions cannot select, close #5233 * doc: update pagination change info, close #5293 * fix: table dynamic expand error, close #5295 * style: remove not use * release 3.0.0-beta.11 * doc: update typo * feat: input add showCount * feat: inputNumber add prefix slot * style: update layout * style: update list * feat: add locale i18 * style: update locale ts * style: update mentions * feat: menu divider add dashed * perf: menu * perf: menu animate * feat: modal method add wrapClassName * style: update pageheader * feat: update pagination ts * feat: confirm add showCancel & promise * doc: update popover * style: update progress * style: radio * style: update rate、result、row * feat: select add fieldNames * feat: add skeleton button & input * feat: spin tip support slot * style: slider & space * stype: update steps ts type * style: update switch * feat: table add tree filter * test: update input sanp * feat: table add filterMode... * fix: tree autoExpandParent bug * test: update input snap * doc: tabs add destroyInactiveTabPane * style: update tag * style: update timeline & time-picker * fix: Tooltip arrowPointAtCenter 1px shift bug * feat: typography add enterEnterIcon triggerType * doc: update tree-select * fix: deps and TypeScript types * style: udpate transfer * style: update style * doc: add colorScheme * chore: add css var builg * doc: sort api * style: lint code * doc: add css var * test: update snap * chore: add pre script * chore: update lint * perf: collapse animate * perf: collapse tree * perf: typography shaking when edit * doc: update auto-complete demo * fix: table tree not have animate * feat: deprecated dropdown center placement * feat: deprecated dropdown center placement * test: update snap
2.1 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 | Version |
|---|---|---|---|---|
| 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 |
events
| Events Name | Description | Arguments | Version |
|---|---|---|---|
| change | Callback for when Affix state is changed | (affixed?: boolean) => void |
Note: Children of Affix must not have the property position: absolute, but you can set position: absolute on Affix itself:
<a-affix :style="{ position: 'absolute', top: y, left: x}">...</a-affix>
FAQ
When binding container with target in Affix, elements sometimes move out of the container.
We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to, like react demo https://codesandbox.io/s/2xyj5zr85p
Related issues：#3938 #5642 #16120
When Affix is used in a horizontal scroll container, the position of the element left is incorrect.
Affix is generally only applicable to areas with one-way scrolling, and only supports usage in vertical scrolling containers. If you want to use it in a horizontal container, you can consider implementing with the native position: sticky property.