bee-affix
react bee-affix component for tinper-bee
some description...
Affix
将页面元素钉在可视范围。 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。页面可视范围过小时，慎用此功能以免遮挡页面内容。
使用方法
import Affix from 'bee-affix';
React.render(<Affix><div className="content"></div></Affix>,
document.getElementById('target'));
样式引入
<link rel="stylesheet" href="./node_modules/bee-affix/build/Affix.css">
//或是
import "./node_modules/bee-affix/src/Affix.scss"
//或是
import "./node_modules/bee-affix/build/Affix.css"
API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| container | 固定元素所属容器 | object | document.body |
| offsetTop | 固定被触发距离，默认是0 ，可选的属性 | number | 0 |
| horizontal | 被固定时是否可以左右滑动，默认是false，可选的属性 | boolean | false |
| canHidden | 当Affix的内容高度超过container可视区域的高度，Affix是否可以被隐藏一部分内容,false：affix始终完全展示，true：展示部分受container限制 | boolean | false |
| target | 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数，默认值() => window | function | () => window |
| onChange | 触发固定或者固定取消时的回调函数,返回值{ affixed: true, event: evt} | function | - |
| onTargetChange | 时刻获取Affix的状态值,返回值{state} | function | - |
| childrenRef | 如果affix下面的内容高度是变化的，让childrenRef是affix下内容的ref；如果affix下面的内容高度不变，不需要使用这个属性 | object | null |
开发调试
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-affix
$ cd bee-affix
$ npm install
$ npm run dev