Sticky 吸顶

该组件与CSS中 position: sticky 属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过 slot, 将需要吸顶的内容放在 fu-sticky 组件中即可，slot 中只能有一个根元素。

<template>
    <view>
        <fu-sticky>
            <!-- 只能有一个根元素 -->
            <text>我是吸顶内容</text>
        </fu-sticky>
    </view>
</template>

吸顶距离

通过 offsetTop 属性设置组件在吸顶时与顶部的距离

<fu-sticky offsetTop="100">
    <text>我是吸顶内容</text>
</fu-sticky>

API

Sticky Props

属性名	说明	类型	默认值	可选值
index	自定义标识，用于区分是哪一个组件	String｜Number	0	-
offsetTop	吸顶时与顶部的距离	String｜Number	0	-
customNavHeight	自定义导航栏的高度 (H5 默认44， 其他默认 0)	String｜Number	0	-
disabled	是否禁用吸顶效果	Boolean	false	true
zIndex	组件的 z-index	String｜Number	998	-
bgColor	组件的背景色	String	-	-
customClass	定义需要用到的外部类	String	-	-
customStyle	定义需要用到的外部样式	String｜Object	-	-

Sticky Slots

插槽名	说明
default	吸顶内容