介绍

粘性布局组件，用于在页面滚动时将元素固定在指定位置。

css 的粘性定位有更好的性能和体验，如果能满足需求，则不需要使用 Sticky 组件。

Sticky 组件通常用于需要粘性定位的元素受父元素范围限制的情景，因为 Sticky 组件能跳脱父元素的范围限制。

代码演示

吸顶

使用 margin-top 设置粘性定位元素距离视窗顶部的距离。

如果是自定义导航栏，则需要自行加上状态栏和导航栏的高度。

黏住视窗状态时使用的是 fixed 定位。

vue ts

<template>
  <s-sticky :margin-top="-safeAreaInsets.top">
    <s-button>吸顶</s-button>
  </s-sticky>
</template>

<script setup lang="ts">
import { safeAreaInsets } from 'sard'
</script>

vue js

<template>
  <s-sticky :margin-top="-safeAreaInsets.top">
    <s-button>吸顶</s-button>
  </s-sticky>
</template>

<script setup lang="js">
import { safeAreaInsets } from 'sard'
</script>

动态插入

即使是动态插入的数据，Sticky 组件也能重新计算其位置。

vue ts

<template>
  <div style="margin-inline-start: 60px">
    <s-button @click="visible = true">点击生成</s-button>
    <s-sticky :margin-top="-safeAreaInsets.top" style="margin-top: 10px">
      <s-button v-if="visible">动态生成</s-button>
    </s-sticky>
  </div>
</template>

<script setup lang="ts">
import { safeAreaInsets } from 'sard'
import { ref } from 'vue'

const visible = ref(false)
</script>

vue js

<template>
  <div style="margin-inline-start: 60px">
    <s-button @click="visible = true">点击生成</s-button>
    <s-sticky :margin-top="-safeAreaInsets.top" style="margin-top: 10px">
      <s-button v-if="visible">动态生成</s-button>
    </s-sticky>
  </div>
</template>

<script setup lang="js">
import { safeAreaInsets } from 'sard'
import { ref } from 'vue'
const visible = ref(false)
</script>

吸底

使用 margin-bottom 设置粘性定位元素距离视窗底部的距离。

<template>
  <s-sticky :margin-bottom="-40" style="margin-top: 450px; margin-inline-start: 150px">
    <s-button>吸底</s-button>
  </s-sticky>
</template>

吸顶和吸底

可以同时使用 margin-top 和 margin-bottom 设置粘性定位元素距离视窗顶部和底部的距离。

vue ts

<template>
  <s-sticky
    :margin-top="-safeAreaInsets.top"
    :margin-bottom="-40"
    style="margin-inline-start: 220px"
  >
    <s-button>吸顶和吸底</s-button>
  </s-sticky>
</template>

<script setup lang="ts">
import { safeAreaInsets } from 'sard'
</script>

vue js

<template>
  <s-sticky
    :margin-top="-safeAreaInsets.top"
    :margin-bottom="-40"
    style="margin-inline-start: 220px"
  >
    <s-button>吸顶和吸底</s-button>
  </s-sticky>
</template>

<script setup lang="js">
import { safeAreaInsets } from 'sard'
</script>

容器中的吸顶

如果要将元素限制在某个范围之内，可以使用 StickyBox 组件包裹着 Sticky 组件。

黏住 StickyBox 组件状态时使用的是 absolute 定位，因此 Sticky 组件不能被其他含有响应其绝对定位于 StickyBox 的定位样式的元素包裹。

vue ts

<template>
  <s-sticky-box style="height: 200px; background: var(--s-fill-color-tertiary)">
    <s-sticky :margin-top="-safeAreaInsets.top - 50" style="margin-inline-start: 150px">
      <s-button>容器中的吸顶</s-button>
    </s-sticky>
  </s-sticky-box>
</template>

<script setup lang="ts">
import { safeAreaInsets } from 'sard'
</script>

vue js

<template>
  <s-sticky-box style="height: 200px; background: var(--s-fill-color-tertiary)">
    <s-sticky :margin-top="-safeAreaInsets.top - 50" style="margin-inline-start: 150px">
      <s-button>容器中的吸顶</s-button>
    </s-sticky>
  </s-sticky-box>
</template>

<script setup lang="js">
import { safeAreaInsets } from 'sard'
</script>

容器中的吸底

<template>
  <s-sticky-box
    style="
      display: flex;
      align-items: flex-end;
      height: 200px;
      background: var(--s-fill-color-tertiary);
    "
  >
    <s-sticky :margin-bottom="-40" style="margin-inline-start: 150px">
      <s-button>容器中的吸底</s-button>
    </s-sticky>
  </s-sticky-box>
</template>

容器中的吸顶和吸底

vue ts

<template>
  <s-sticky-box
    style="
      display: flex;
      align-items: center;
      height: 300px;
      background: var(--s-fill-color-tertiary);
    "
  >
    <s-sticky
      :margin-top="-safeAreaInsets.top - 50"
      :margin-bottom="-40"
      style="margin-inline-start: 150px"
    >
      <s-button>容器中的吸顶和吸底</s-button>
    </s-sticky>
  </s-sticky-box>
</template>

<script setup lang="ts">
import { safeAreaInsets } from 'sard'
</script>

vue js

<template>
  <s-sticky-box
    style="
      display: flex;
      align-items: center;
      height: 300px;
      background: var(--s-fill-color-tertiary);
    "
  >
    <s-sticky
      :margin-top="-safeAreaInsets.top - 50"
      :margin-bottom="-40"
      style="margin-inline-start: 150px"
    >
      <s-button>容器中的吸顶和吸底</s-button>
    </s-sticky>
  </s-sticky-box>
</template>

<script setup lang="js">
import { safeAreaInsets } from 'sard'
</script>

API

StickyProps

属性	描述	类型	默认值
margin-top	吸顶距离，单位px	number	-
margin-bottom	吸底距离，单位px	number	-
z-index	粘性元素的层级	number | string	-

StickySlots

插槽	描述	属性
default	自定义默认内容	-