当前位置: 代码迷 >> 综合 >> sticky react-sticky 如何简单使用
  详细解决方案

sticky react-sticky 如何简单使用

热度:85   发布时间:2023-12-29 23:42:39.0

git原文:https://github.com/captivationsoftware/react-sticky

NPM:

# npm install react-sticky
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
<StickyContainer><Sticky>{({style,isSticky,wasSticky,distanceFromTop,distanceFromBottom,calculatedHeight}) => (<divstyle={
   {...style,zIndex: 3,backgroundColor: '#5890ff'color: 'white',padding: '2px 0'}}><span style={
   {paddingLeft: '5px' }}></span>设备状态:: '离线中'</div>)}</Sticky>{/* Sticky 为悬浮框 */}<div className={styles.bodyBox}>{/* content body */}</div>
</StickyContainer>

注:StickyContainer 需要包裹所有内容

  相关解决方案