React

React 初探之 react-sticky

2019-02-18  本文已影响45人  bowen_wu

概述

翻译 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,但是为高级用例传递了一些其他的特性

在父 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

上一篇 下一篇

猜你喜欢

热点阅读