Container to scroll.

API

FAQ

When binding container with target in Affix, elements sometimes move out of the container.

When Affix is used in a horizontal scroll container, the position of the element left is incorrect.

Affix

Watermark App

Affix

Wrap Affix around another component to make it stick the viewport.

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.

Examples

Basic

The simplest usage.

Container to scroll.

Set a target for 'Affix', which is listen to scroll event of target element (default is window).

Callback

Callback with affixed state.

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

Namu Design

Affix

Namu Design

Affix

When To Use

Examples

API

FAQ

When binding container with `target` in Affix, elements sometimes move out of the container.

When Affix is used in a horizontal scroll container, the position of the element `left` is incorrect.

When To Use

Examples

API

FAQ

When binding container with `target` in Affix, elements sometimes move out of the container.

When Affix is used in a horizontal scroll container, the position of the element `left` is incorrect.

Affix

AffixChangelog

When To Use

Examples

API

FAQ

When binding container with target in Affix, elements sometimes move out of the container.

When Affix is ​​used in a horizontal scroll container, the position of the element left is incorrect.

When To Use

Examples

API

FAQ

When binding container with target in Affix, elements sometimes move out of the container.

When Affix is ​​used in a horizontal scroll container, the position of the element left is incorrect.

Affix

When binding container with `target` in Affix, elements sometimes move out of the container.

When Affix is used in a horizontal scroll container, the position of the element `left` is incorrect.

When binding container with `target` in Affix, elements sometimes move out of the container.

When Affix is used in a horizontal scroll container, the position of the element `left` is incorrect.