No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
demo
dist
docs
src
test
.DS_Store
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
HISTORY.md
README.md
README_EN.md
index.html
package.json

README.md

bee-affix

npm version Build Status Coverage Status devDependency Status NPM downloads Average time to resolve an issue Percentage of issues still open

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