Sticky 吸顶

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

平台差异说明

App(vue)	App(nvue)	H5	微信小程序
√	√	√	√

:::success 说明 本组件内部通过多种手段嗅探当前运行环境是否支持css sticky，在H5，APP-VUE，NVUE，MP-WEIIXN，安卓 等环境可以进行准确判断，如果支持则使用CSS方案，否则使用降级的JS方案 :::

基本使用

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

• 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

<template>
  <view class="container">
    <!-- 建议放在外层 -->
    <su-sticky>......</su-sticky>
    <view class="container__inner">
      <!-- 不建议放在层层嵌套的view中，除非您清楚知道自己为什么需要这么做 -->
      <su-sticky>......</su-sticky>
    </view>
  </view>
</template>

吸顶距离

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

<su-sticky offset-top="200">
  <view>塞下秋来风景异，衡阳雁去无留意</view>
</su-sticky>

示例源码

点击可以查看 右侧演示页面的源码

API

Props

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