Sticky 粘性布局

使用指南

组件介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

引入方式

import { Sticky } from "feart";

components:{
  'fe-sticky':Sticky,
}

代码演示

基础用法

<fe-sticky>
  <fe-image width="100" height="100" src="https://nuofe.nntest.cn/feart/images/demoimgs/cat.jpg" />
</fe-sticky>

距离顶部

通过 offset-top 属性可以设置组件在吸顶时与顶部的距离

<fe-sticky :offset-top="60">
  <div style="margin-left:120px;">内容2</div>
</fe-sticky>

指定容器

html

<div ref="container" class="demobox">
  <fe-sticky :container="container" :offset-top="50" class="box">
    <fe-button type="primary" size="small" style="margin-left:210px;">我是按钮</fe-button>
  </fe-sticky>
</div>

js

data() {
    return {
        container: null,
    };
},
mounted() {
  this.container = this.$refs.container;
}

API

Events