vant sticky 粘性布局

Vant 是一个基于 Vue.js 的移动端组件库，而 sticky 粘性布局是其中一种常用的布局方式。该布局方式可以让元素在滚动时“粘”在页面的指定位置，常用于顶部导航栏、侧边栏等固定位置的元素。

在 Vant 中，可以使用 `van-sticky` 组件来实现粘性布局。该组件需要指定一个 `offset-top` 属性，表示元素距离页面顶部的距离。当元素滚动到这个距离时，就会触发粘性布局效果。

以下是一个简单的示例：

<template>
  <div>
    <van-sticky :offset-top="50">
      <div class="navbar">这是一个顶部导航栏</div>
    </van-sticky>
    <div class="content">这是页面内容</div>
  </div>
</template>

<script>
import { VanSticky } from 'vant';

export default {
  components: {
    VanSticky,
  },
};
</script>

<style>
.navbar {
  height: 50px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

.content {
  height: 1000px;
}
</style>

在上面的示例中，我们使用了 `van-sticky` 组件来包裹一个顶部导航栏，并设置了 `offset-top="50"`，表示该导航栏距离页面顶部的距离为 50px。当页面滚动时，导航栏就会“粘”在页面顶部，直到页面滚动到导航栏下方时才会取消粘性布局效果。

注意，使用粘性布局时需要注意元素的高度和宽度，以免影响页面其他元素的布局。