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>