mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity
7385f624c1
ant-design/components/affix/index.en-US.md
二货爱吃白萝卜 20561d6f9d
docs: Fix component doc alignment & support import usage (#48004) 
* docs: init ref

* docs all support

* docs: fix link show
2024-03-22 14:22:42 +08:00

2.6 KiB
Raw Blame History

category title description cover coverDark demo group
Components Affix Stick an element to the viewport. https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
cols
2
title order
Other 7

When To Use

On longer web pages, it's helpful to stick component into 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.

Notes for developers

After version 5.10.0, we rewrite Affix use FC, Some methods of obtaining ref and calling internal instance methods will invalid.

Examples

Basic Callback Container to scroll. debug

API

Common props ref：Common props

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 (affixed?: boolean) => void -

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

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: https://codesandbox.io/s/stupefied-maxwell-ophqnm?file=/index.js

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.

Related issues：#29108