Sticky 吸顶

创建一个在滚动时可以固定在顶部的内容块，支持配置吸顶元素的ID、层叠顺序、吸顶位置等

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='吸顶' :isLoading="false">
		<t-col class="p.30" :id="guid">
			<t-card class="mb.30" title='Sticky粘性布局'
				sub-title="Sticky粘性布局，用于实现元素在页面滚动时固定在指定位置，支持自定义z-index和top值，简单易用。"></t-card>

			<t-sticky :ins-id="guid" class="mb.30">
				<t-col class="h.100-p.24px 0px-tb.p-fl-fc-tdb.p-tdr">
					<t-text class="c.#fff fs.18">欢迎使用Tui</t-text>
				</t-col>
			</t-sticky>
			<t-col v-for="i in 3" :key="i" class="h.200-tdr-tdb-mb.30"></t-col>
			<t-sticky :ins-id="guid" sticky-top="100rpx" class="mb.30">
				<t-col class="h.40-p.24px 0px-tb.e-fl-fc-tdb.s-tdr">
					<t-text class="c.#fff fs.16">Tui是一个强大的UI库，提供了丰富的组件和灵活的配置。</t-text>
				</t-col>
			</t-sticky>
			<t-col v-for="i in 3" :key="i" class="h.200-tdr-tdb-mb.30"></t-col>
			<t-sticky :ins-id="guid" sticky-top="200rpx" class="mb.30">
				<t-col class="w.100%-h.40-p.24px 0px-tb.w-fl-fc-tdb.e-tdr-oh">
					<t-text class="c.#fff fs.16">快速导航：首页 | 优惠券 | 会员中心 | 客服支持</t-text>
				</t-col>
			</t-sticky>
			<t-col v-for="i in 5" :key="i" class="h.200-tdr-tdb-mb.30"></t-col>
		</t-col>
	</t-page>
</template>
<script setup>
	import { TuiGuid } from '@/uni_modules/t-ui/index';
	const guid = ref(TuiGuid(20))
</script>

Props

名称	描述	类型	默认值	可选值
insId	吸顶元素的ID	String	''	-
zIndex	层叠顺序	Number	88	-
stickyTop	吸顶位置，默认为0	String	'0'	-