https://github.com/future-team/multiple-celling
multiple platform celling for react ,jQuery,H5
https://github.com/future-team/multiple-celling
Last synced: 9 months ago
JSON representation
multiple platform celling for react ,jQuery,H5
- Host: GitHub
- URL: https://github.com/future-team/multiple-celling
- Owner: future-team
- License: mit
- Created: 2016-08-23T05:58:22.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-25T11:59:29.000Z (almost 10 years ago)
- Last Synced: 2025-02-24T09:33:31.061Z (over 1 year ago)
- Language: JavaScript
- Size: 170 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# multiple-celling
- 这是一个适用于jquery和react两种技术栈的celling组件
是的没错，不管你是jquery还是react都可以使用该组件，而不需要分别引用不同的版本或者组件
- 实现元素吸顶、吸底或者元素将要隐去时吸顶等效果
## UI展示
- test的div当滚动到顶部时吸顶：
初始状态：
滚动未到顶部时：
滚动到顶部及更多时，吸顶：
## 使用
- 使用时，jquery版本需要指定要处理的元素，fix的位置
配置项如下：
```
/**
* 要实现fix的元素选择器，如'.test'
* */
root:'',
/**
* fix的位置
* top,bottom,middle
* */
position:'top'
```
- 使用实例：
jq版本:
```
import {ForJQ} from '../../src/ForJQ.js';
(()=>{
$('.test').ForJQ({
root:'.test',
position:'middle'
});
})()
```
- react版本
```
import ForReact from '../../src/ForReact.js';
export default class CellFRDemo extends Component {
constructor(props,context) {
super(props,context);
}
render() {
return (
测试好吧
);
}
}
```
html:
```
测试好吧
```
- 注：若要兼容ie8及以下版本请引入es5-shim。
在html中判断版本，ie9以下引入。例如：
```
```
## update
- 0.1.0及之前版本 init及修复
## Command
```
#测试
npm run test
#打包
npm run build
#例子演示
npm run demo
```