Affix 固钉

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

何时使用

当用户需要将某个组件固定在页面的某个位置时，可以使用 Affix 组件进行固定。

API

固钉

代码示例

基本

也就意味着当页面往下滚动时，当 Affix 元素接触到浏览器边框时，此时会将 Affix 钉住。最简单的用法。默认情况下，Affix 的默认目标容器元素是整个 window，并且 offsetTop = 0，

查看源码在线预览

import { Affix, Button } from "@icedesign/base";
ReactDOM.render(
  <div className="custom-affix-wrapper">
    <Affix>
      <Button type="secondary">Affixed Button</Button>
    </Affix>
  </div>,
  mountNode
);

.custom-affix-wrapper {
    padding: 40px 0;
}

自定义目标容器

可以通过 container 属性设置 Affix 组件需要监听其滚动事件的元素，该属性接收一个函数作为参数，默认为 () => window。

查看源码在线预览

import { Affix, Button } from "@icedesign/base";
class Demo extends React.Component {
  _containerRefHandler(ref) {
    this.container = ref;
  }
  render() {
    return (
      <div
        className="custom-affix-container"
        ref={this._containerRefHandler.bind(this)}
      >
        <div className="a-wrapper">
          <Affix
            container={() => this.container}
            offsetTop={0}
            onAffix={affixed => console.log(affixed)}
          >
            <Button type="secondary">Affixed Button</Button>
          </Affix>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.custom-affix-container {
    height: 150px;
    overflow-y: scroll;
    background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;
}
.custom-affix-container .a-wrapper {
    padding-top: 50px;
    height: 500px;
}

自定义偏移量

可以通过 offsetTop 或 offsetBottom 自定义偏移量。

查看源码在线预览

import { Affix, Button } from "@icedesign/base";
ReactDOM.render(
  <div className="custom-affix-wrapper">
    <Affix offsetBottom={0}>
      <Button type="secondary">Affixed Button</Button>
    </Affix>
  </div>,
  mountNode
);

.custom-affix-wrapper {
    padding: 40px 0;
}

相关区块

暂无相关区块