xl vision
  • Component
  • React Hooks
  • Playground
  • Overview
  • Color
  • Getting Start
    • Installation
  • General
    • Icon
    • Button
  • Layout
    • Grid
  • Form
    • Input
    • InputNumber
    • Textarea
  • Navigation
    • Dropdown
    • Affix
    • BackTop
    • Anchor
  • Data Display
    • Tooltip
    • Popover
    • Avatar
  • Faceback
    • Popconfirm
    • Dialog
    • Message
    • Notication
  • Animation
    • Transition
    • TransitionGroup
    • CollapseTransition
    • Ripple
  • Styles
    • Theme
    • CssBaseline
  • Basic Component
    • BaseButton
    • Portal
    • Popper
    • Modal
    • ResizeObserver

Affix

Pins page elements to the visible range.

Examples

Baisc stage

Baisc Stage

Callback

Callback for affix state changed.

Specify container

Specify container for positioning.

Properties

PropertyDescriptionTypeDefaultRequire
children-React.ReactNode-false
targetSpecifies the scrollable area DOM nodeWindow | HTMLElement |(() => Window | HTMLElement)() => windowfalse
offsetTopOffset from the top of the viewport (in pixels)number-false
offsetBottomOffset from the bottom of the viewport (in pixels)number-false
onChangeCallback for when Affix state is changed(affixed: boolean) => void-false

FAQ

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

From a performance perspective, we only listen for container scroll events. If you have other needs, you can manually call the handleEventEmit and handleSizeChange methods of Affix.

Examples
Baisc stage
Callback
Specify container
Properties
FAQ
1. When binding container with target in Affix, elements sometimes move out of the container.
Copyright © 2020-2021 Rhys Xia