方案一:
监听页面滚动,当页面滚动到当前吸顶组件的位置时,将组件的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) =>