IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
xy-affix
图钉组件, 固定某个元素。
特性
- 支持上下 2 个方向的固定
- 支持
auto
自动固定, 让元素始终保持固定在可视区域内 - offset 偏移量指定
安装
# yarn yarn add xy-affix
使用例子
;;;ReactDOM.render , container,;
何时使用
当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
页面可视范围过小时,慎用此功能以免遮挡页面内容。
API
按钮
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
placement | 固定方向 | "top", "bottom", "auto" | "auto" |
offset | 偏移量, 离窗口侧达到指定偏移量后触发 | number | - |
fixed | 是否启用固定 | boolean | true |
target | 设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => windows |
onChange | 固定状态改变回调 | (fixed: boolean) => void | - |
开发
yarn run start
例子
测试
yarn run test
开源许可
xy-affix is released under the MIT license.