昨天分享了一个Vue导航吸顶组件，今天继续给大家推荐一款React吸顶组件ReactSticky。

react-sticky 基于react.js构建的轻量级滚动粘性库组件，star高达2.4K+。支持多个navbar或两列布局粘性。

旨在让开发者创建sticky元素的UI更加容易。

css3实现一个简单的吸顶结构。

注意：position:sticky在IE下支持不够友好，大家使用前需视情况考虑。

<div class="sticky-container">  <div class="sticky">吸顶内容</div></div>body {  height: 1200px;}.sticky-container {  /**    因为sticky需要外层容器高度，所以这里需要设置，或者靠sticky元素的兄弟给父元素撑起高度  **/  height: 400px;  background:red;}.sticky {  position: sticky;  top: 0px;  background:blue;}

$ npm i react-sticky -S

import React from 'react';import { StickyContainer, Sticky } from 'react-sticky';// ...class App extends React.Component {  render() {    return (      <StickyContainer>        <Sticky>          {({style}) => (            <header style={style}>              {/* ... */}            </header>          )}        </Sticky>        {/* ... */}      </StickyContainer>    );  },};

<StickyContainer>  ...  <Sticky topOffset={80}>    { props => (...) }  </Sticky>  ...</StickyContainer>

上面将会导致一个元素变成 sticky 如果它的顶部距离 <StickyContainer /> 的顶部大于或等于 80px

<StickyContainer>  ...  <Sticky bottomOffset={80}>    { props => (...) }  </Sticky>  ...</StickyContainer>

上面将会导致一个元素停止 sticky 如果它的底部距离 <StickyContainer /> 的底部是 80px

非常好的一款开源react.js吸顶组件。如果大家感兴趣可以去试试。

# 演示地址 仓库地址

ok，今天就分享到这里。希望大家能喜欢哈！