Sticky スティッキー - Vant 4

Sticky スティッキー

紹介

Sticky コンポーネントは CSS の position: sticky と同様の効果です。画面内では通常のレイアウト、画面外へスクロールすると上部に固定されます。

取り込み

以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。

import { createApp } from'vue'; import { Sticky } from'vant'; const app = createApp(); app.use(Sticky);

🎯 コード例

📌 基本的な使い方

内容を Sticky で包むだけで簡単にスティッキー効果を実現。スクロールで上部に吸着します。

<template>
  <div class="demo-sticky">
    <van-sticky>
      <van-button type="primary" style="margin-left: 15px;">
        基础用法
      </van-button>
    </van-sticky>
  </div>
</template>

<style>
.demo-sticky {
  height: 150vh;
  padding-top: 50px;
  background: linear-gradient(180deg, #f7f8fa 0%, #fff 100%);
}
</style>

📏 上部オフセット

offset-top で上部との距離を調整し、重要な内容との重なりを避けます。

<template>
  <div class="demo-sticky">
    <van-sticky :offset-top="50">
      <van-button type="warning" style="margin-left: 115px;">
        吸顶距离 50px
      </van-button>
    </van-sticky>
  </div>
</template>

<style>
.demo-sticky {
  height: 150vh;
  padding-top: 50px;
  background: linear-gradient(180deg, #f7f8fa 0%, #fff 100%);
}
</style>

📦 コンテナの指定

container でコンテナを指定すると、その範囲内で固定されます。

<template>
  <div class="demo-sticky">
    <div ref="container" class="scroll-container">
      <van-sticky :container="container">
        <van-button type="success" style="margin-left: 215px;">
          指定容器
        </van-button>
      </van-sticky>
      <div class="content">
        <p v-for="i in 20" :key="i">容器内容 {{ i }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const container = ref(null);
    return { container };
  },
};
</script>

<style>
.scroll-container {
  height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 6px;
}

.content {
  padding: 15px;
}

.content p {
  margin: 10px 0;
  padding: 10px;
  background: #f7f8fa;
  border-radius: 4px;
}
</style>

⬇️ 下部オフセット

position="bottom" で下部に固定し、offset-bottom で距離を調整します。

<template>
  <div class="demo-sticky">
    <van-sticky position="bottom" :offset-bottom="50">
      <van-button type="danger" style="margin-left: 15px;">
        吸底距离 50px
      </van-button>
    </van-sticky>
  </div>
</template>

<style>
.demo-sticky {
  height: 150vh;
  padding-top: 50px;
  background: linear-gradient(180deg, #f7f8fa 0%, #fff 100%);
}
</style>

📋 API

🎛️ Props

パラメータ	説明	型	デフォルト
position	📍 固定位置（bottom を指定可能）	string	top
offset-top	📏 上部固定時の距離（px``vw``vh``rem）	*number	string*
offset-bottom	📐 下部固定時の距離（px``vw``vh``rem）	*number	string*
z-index	🔢 固定時の z-index	*number	string*
container	📦 コンテナの HTML ノード	Element	-

🎪 Events

イベント名	説明	コールバック引数
change	🔄 固定状態が変化した時に発火	isFixed: boolean
scroll	📜 スクロール時に発火	{ scrollTop: number, isFixed: boolean }

📘 型定義

コンポーネントは以下の型定義を提供します：

import type { StickyProps, StickyPosition } from 'vant';

🎨 テーマカスタマイズ

🎭 スタイル変数

以下の CSS 変数でスタイルをカスタマイズできます。使用方法は ConfigProvider コンポーネント を参照してください。

名称	デフォルト	説明
--van-sticky-z-index	99	🔢 固定時のレイヤー。適切な表示優先度を保証

📚 関連ドキュメント

🧭 ナビゲーションコンポーネント

• NavBar ナビバー - ページ上部のナビ（Sticky と併用）
• Tab タブ - タブ切り替え（スティッキー対応）
• Tabbar タブバー - 下部ナビゲーションバー
• IndexBar インデックスバー - インデックスナビ（スティッキー対応）

📦 レイアウトコンポーネント

• Col レイアウト - グリッド列コンポーネント
• Space スペース - コンポーネント間の余白設定

🔧 ツールコンポーネント

• ConfigProvider グローバル設定 - スタイルとテーマの一元設定