Affix

Make an element stick to viewport.

When To Use#

When user browses a long web page, some content need 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.

Examples


The simplest usage.

expand codeexpand code
import { Affix, Button } from 'antd';

class Demo extends React.Component {
  state = {
    top: 10,
    bottom: 10,
  };

  render() {
    return (
      <div>
        <Affix offsetTop={this.state.top}>
          <Button
            type="primary"
            onClick={() => {
              this.setState({
                top: this.state.top + 10,
              });
            }}
          >
            Affix top
          </Button>
        </Affix>
        <br />
        <Affix offsetBottom={this.state.bottom}>
          <Button
            type="primary"
            onClick={() => {
              this.setState({
                bottom: this.state.bottom + 10,
              });
            }}
          >
            Affix bottom
          </Button>
        </Affix>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

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

expand codeexpand code
import { Affix, Button } from 'antd';

class Demo extends React.Component {
  render() {
    return (
      <div
        className="scrollable-container"
        ref={node => {
          this.container = node;
        }}
      >
        <div className="background">
          <Affix target={() => this.container}>
            <Button type="primary">Fixed at the top of container</Button>
          </Affix>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

Callback with affixed state.

expand codeexpand code
import { Affix, Button } from 'antd';

ReactDOM.render(
  <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
    <Button>120px to affix top</Button>
  </Affix>,
  mountNode,
);

API#

PropertyDescriptionTypeDefaultVersion
offsetBottomPixels to offset from bottom when calculating position of scrollnumber-
offsetTopPixels to offset from top when calculating position of scrollnumber0
targetspecifies the scrollable area dom node() => HTMLElement() => window
onChangeCallback for when affix state is changedFunction(affixed)-

Note: Children of Affix can not be position: absolute, but you can set Affix as position: absolute:

<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>

FAQ#

Affix bind container with target, sometime move out of container.#

We don't listen window scroll for performance consideration. You can add listener if you still want: https://codesandbox.io/s/2xyj5zr85p

Related issue:#3938 #5642 #16120

LayoutBreadcrumb