多组件吸顶实现方案

方案一：
监听页面滚动，当页面滚动到当前吸顶组件的位置时，将组件的position
置为fixed，但是当页面有多个吸顶元素的时候会造成组件之间相互交接。
该方案有几个问题较难解决：
1. 页面中有多个元素的时候需要获取到各个吸顶组件的高度，按照顺序通
过以上组件的高度计算自身的top值。
2. 当组件position变为fixed的时候，组件脱离文档流，造成布局变化，
页面整体高度变化，滚动条自然也会相应变化，所以需要一个展位元素将
高度撑起来。
3. 计算各自top可能会造成精度问题，当高度出现小数时，多个高度累加
会造成top值偏高，此时组件之间可能会出现缝隙，解决的方法是top在计
算得到的值基础上减1，但也可能会造成相互遮挡边框的可能。

方案二：
使用 position: sticky 方案。
问题：
1. 需要解决top问题，同方案一；
2. sticky并不稳定，有些时候可能会失效。

方案三：
使用 flex + portal 方案
思路： 将一个容器固定吸顶，当页面滑动到对应吸顶组件将要被遮挡的时候在用
portal将其传入吸顶容器中；吸顶容器使用flex布局，吸顶组件则可用order来区分
顺序。该方案不用计算top值，只需控制什么时候传送即可；也比较稳定。
问题：
1. 占位问题，同一；

// 方案三实现
import React, {
   
    useEffect, useRef, useState } from 'react';
import s from './index.module.scss';
import Portal from './Portal';
export interface IStickyProps {
   
   
    target?: React.RefObject<any>;
    targetId?: string;
    children: any;
    isPortal?: boolean;
    handleScroll?: (targetRefInfo: DOMRect, stickyRefInfo: DOMRect) => boolean;
    keepHeight?: boolean;
    itemKey?: string;
    beforePortalStyle?: React.CSSProperties;
    afterPortalStyle?: React.CSSProperties;
    order?: number; // 排列顺序
}

const Sticky = (props: IStickyProps) => {
   
   
    const {
   
    target, children