logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Affix

Stick an element to the viewport.
Importimport { Affix } from "antd";
Sourcecomponents/affix
Docs
Edit this page...

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

Changelog

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

API

Common props ref:Common props

PropertyDescriptionTypeDefault
offsetBottomOffset from the bottom of the viewport (in pixels)number-
offsetTopOffset from the top of the viewport (in pixels)number0
targetSpecifies the scrollable area DOM node() => HTMLElement() => window
onChangeCallback 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:

jsx
<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

Basic

The simplest usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Container to scroll.

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Callback

Callback with affixed state.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code