# Sticky 吸顶 
该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时，
就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
提示
由于右侧的演示是通过iframe标签引入的，缺少了手机端运行的相关API，所以吸顶是看不到效果的，手机端有不会这些问题，请在右上角的“演示”中用手机扫码查看对应的效果
# 平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
# 基本使用
通过slot，将需要吸顶的内容放在Sticky组件中即可，slot中只能有一个根元素
注意！
由于页面依赖相关的原因的，部分页面会出现Cannot read property 'bottom' of null的报错，可以参考 issue #239 (opens new window) 进行处理。
<template>
<view class="container">
<u-sticky>
<!-- 只能有一个根元素 -->
<view class="sticky">
宝剑锋从磨砺出,梅花香自苦寒来
</view>
</u-sticky>
</view>
</template>
<style lang="scss" scoped>
.container {
height: 200vh;
margin-top: 150rpx;
}
.sticky {
width: 750rpx;
height: 120rpx;
background-color: #2979ff;
color: #fff;
padding: 24rpx;
}
</style>
# 吸顶距离
通过offset-top参数设置组件在吸顶时与顶部的距离
<u-sticky offset-top="200">
<view>
塞下秋来风景异，衡阳雁去无留意
</view>
</u-sticky>
# API
# Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| offset-top | 吸顶时与顶部的距离，单位rpx | String | Number | 0 | - |
| index | 自定义标识，用于区分是哪一个组件 | String | Number | - | - |
| enable | 是否开启吸顶功能 | Boolean | true | false |
| bg-color | 组件背景颜色 | String | #ffffff | - |
| z-index | 吸顶时的z-index值 | String | Number | 970 | - |
| h5-nav-height | 导航栏高度，自定义导航栏时(无导航栏时需设置为0)，需要传入此值，单位px | String | Number | 44 | - |
# Event
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| fixed | 组件吸顶时触发 | index: 通过props传递的index |
| unfixed 1.5.6 | 组件取消吸顶时触发 | index: 通过props传递的index |