# Sticky 吸顶

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

# 平台差异说明

App(vue) App(nvue) H5 小程序

说明

本组件内部通过多种手段嗅探当前运行环境是否支持css sticky,在H5APP-VUENVUEMP-WEIIXN安卓 等环境可以进行准确判断,如果支持则使用CSS方案,否则使用降级的JS方案。

# 基本使用

由于css sticky的特殊性,建议您将此组件放置在页面外层元素中,否则可能会导致sticky失效,以下为MDN对sticky的解释 (opens new window)

  • 元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
<template>
	<view class="container">
		<!-- 建议放在外层 -->
		<u-sticky>......</u-sticky>
		<view class="container__inner">
			<!-- 不建议放在层层嵌套的view中,除非您清楚知道自己为什么需要这么做 -->
			<u-sticky>......</u-sticky>
		</view>
	</view>
</template>
✅ Copy success!

# 吸顶距离

通过offset-top参数设置组件在吸顶时与顶部的距离

<u-sticky offset-top="200">
	<text>塞下秋来风景异,衡阳雁去无留意</text>
</u-sticky>
✅ Copy success!

# 此页面源代码地址

页面源码地址


 github  gitee

# API

# Props

参数 说明 类型 默认值 可选值
offsetTop 吸顶时与顶部的距离,单位rpx String | Number 0 -
customNavHeight 导航栏高度,自定义导航栏时,需要传入此值 String | Number 0 -
disabled 是否禁用吸顶功能 Boolean false true
bgColor 组件背景颜色 String #ffffff -
zIndex 吸顶时的z-index值,NVUE无效 String | Number - -
index 自定义标识,用于区分是哪一个组件 String | Number - -