Sticky 吸顶

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

提示

由于右侧的演示是通过iframe标签引入的，缺少了手机端运行的相关API，所以吸顶是看不到效果的，手机端有不会这些问题，请在右上角的“演示”中用手机扫码查看对应的效果

平台差异说明

基本使用

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

<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

Event