React 初探之 react-sticky
概述
翻译 react-sticky
文档
Make your React component sticky!
CSS
CSS 属性 position: sticky
可以替代 react-sticky
,但是它(position: sticky
)的浏览器兼容不是很好,尤其是不支持 IE11 和 table
元素的一些 bug,在使用 react-sticky
之前,检查一下如果浏览器支持和限制阻止你使用 position: sticky
,因为 CSS 总是比 JS 更快和耐用
position: -webkit-sticky;
position: sticky;
top: 0;
安装
npm install react-sticky
概述和基本示例
react-sticky
的目标是对于开发者去创建有 sticky 元素的 UI 更容易。一些示例包括 sticky navbar 或者 两列布局,其中左侧 sticky 右侧滚动
react-sticky
通过计算 <Sticky>
组件相对于 <StickyContainer>
组件的位置进行工作,如果他出现在视口的外面,将其附加到屏幕的顶部所需要的样式作为参数传递给 render calback,作为 child 传递的函数
<StickyContainer>
<Sticky>{({ style }) => <h1 style={style}>Sticky element</h1>}</Sticky>
</StickyContainer>
大多数用例仅仅需要将样式传递给 DOM,但是为高级用例传递了一些其他的特性
-
style
( Object ) -> 可被修改的样式属性,选择性的传递给此函数返回的元素,对于许多用途,这将是唯一需要的属性 -
isSticky
( Boolean ) -> 作为当前事件导致的元素是 sticky ? -
wasSticky
( Boolean ) -> 在当前事件之前元素是 sticky ? -
distanceFromTop
( Number ) -> 从Sticky
的顶部到StickyContainer
的顶部的最近的像素值 -
distanceFromBottom
( Number ) -> 从Sticky
的底部到StickyContainer
的底部的最近的像素值 -
calculateHeight
( Number ) -> 此函数返回的元素的 height
在父 StickyContainer
中发生事件时 Sticky
child 函数将会被调用,并将作为回调来应用你自己的逻辑和自定义,随着 sane style
属性,使您能够快速启动和运行
完整的例子
下面是所有这些片段的一个例子
app.js
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
// ...
class App extends React.Component {
render() {
return (
<StickyContainer>
{/* Other elements can be in between `StickyContainer` and `Sticky`,
but certain styles can break the positioning logic used. */}
<Sticky>
{({
style,
// the following are also available but unused in this example
isSticky,
wasSticky,
distanceFromTop,
distanceFromBottom,
calculatedHeight
}) => (
<header style={style}>
{/* ... */}
</header>
)}
</Sticky>
{/* ... */}
</StickyContainer>
);
},
};
当 stickiness
被激活时,sticky
函数的参数被修改,同样的,不被激活时,参数将会相应的更新
<StickyContainer />
Props
<StickyContainer>
支持所有有效的 <div />
属性
<Sticky />
Props
-
relative
( default: false ) -> 如果设置relative
为true
则<Sticky />
元素将会在 overflowing<StickyContainer />
中渲染(e.g.style={{ overflowY: 'auto' }}
)和你想要的<Sticky />
行为仅在该容器内做出反应。在relative
模式下,window
事件不会触发<Sticky />
状态改变,仅仅在滚动到<StickyContainer />
最近时才会触发<Sticky />
状态改变 -
topOffset
( default: 0 ) -> 当<Sticky />
顶部距离是最近<StickyContainer />
的topOffset
值时,状态将会被触发。Positive numbers give the impression of a lazy sticky state, whereas negative numbers are more eager in their attachment.
app.js
<StickyContainer> ... <Sticky topOffset={80}> { props => (...) } </Sticky> ... </StickyContainer>
上面将会导致一个元素变成
sticky
如果它的顶部距离<StickyContainer />
的顶部大于或等于 80px -
bottomOffset
( default: 0 ) -> 当<Sticky />
底部距离是最近<StickyContainer />
的bottomOffset
值时,状态将会被触发
app.js<StickyContainer> ... <Sticky bottomOffset={80}> { props => (...) } </Sticky> ... </StickyContainer>
上面将会导致一个元素停止
sticky
如果它的底部距离<StickyContainer />
的底部是 80px -
disableCompensation
( default: false ) -> 设置disableCompensation
为true
如果你不想让你的<Sticky />
将填充应用于隐藏占位符<div />
以在附件中更改position: fixed
和更正时更正jumpiness
app.js<StickyContainer> ... <Sticky disableCompensation> { props => (...) } </Sticky> ... </StickyContainer>
-
disableHardwareAcceleration
( default: false ) -> 当disableHardwareAcceleration
设置为true
时,<Sticky />
元素将不会使用硬件加速( e.g.transform: translateZ(0)
)。不建议使用此设置,因为它会对移动体验产生不利影响,并且通常可以通过改进 DOM 的结构来避免
app.js<StickyContainer> ... <Sticky disableHardwareAcceleration> { props => (...) } </Sticky> ... </StickyContainer>