react-sticky制作吸顶效果 使用遇到问题小结

react-sticky制作吸顶效果 使用遇到问题小结

需求

制作电梯组件，并且使其具有吸顶效果

使用typescript ，在yarn add react-sticky 之后，还需要添加类型声明,
yarn add @types/react-sticky -D

使用方式以及遇到的问题

官方使用例子

1、需要实现的效果：

一个组件时候能够正常吸顶，多个组件的时候，当滑动到对应的组件就能够实现后面的组件吸顶覆盖前面的吸顶组件。

2020-05-20 10.07.21.gif 2020-05-20 10.11.28.gif

2、简单使用例子

安装

yarn add react-sticky
或者 
npm install react-sticky

简单使用

import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';

<StickyContainer style={{overflow: "auto", height: "100%"}}>
    {/* Sticky 包裹需要吸顶的元素 */}
    <Sticky relative={true}>
        {({
             style,
        }) => (
            <div
                style={{
                    ...style,
                    z-index: 3
                  }}
                >
                <span>吸顶块</span>
            </div>
        )}
    </Sticky>
   
    <div>
        {/* content body 其他内容 */}
    </div>
</StickyContainer>

上面代码使用了relative 模式

1、当Sticky 使用的是relative 模式的时候，父组件需要设置height 和overflow:auto属性的话，否则实现不了吸顶的效果。

2、StickyContainer需要包裹整个页面即所有的组件