---
tagName: ai-portal.sticky-container
displayName: WrappedAiPortalStickyContainer
description: 粘性容器构件，使内容在页面滚动时固定在顶部。
category: ""
source: "@next-bricks/ai-portal"
---

# WrappedAiPortalStickyContainer

> 粘性容器构件，使内容在页面滚动时固定在顶部。

## 导入

```tsx
import { WrappedAiPortalStickyContainer } from "@easyops/wrapped-components";
```

## Props

| 属性    | 类型                  | 必填 | 默认值      | 说明                                                           |
| ------- | --------------------- | ---- | ----------- | -------------------------------------------------------------- |
| variant | `"default" \| "home"` | 否   | `"default"` | 变体风格，通过 CSS attribute selector 控制样式，不触发重新渲染 |

## Slots

| 名称      | 说明   |
| --------- | ------ |
| (default) | 内容   |
| header    | 头部   |
| toolbar   | 工具栏 |

## Examples

### 基础使用

将内容放入粘性容器，页面滚动时内容固定在顶部。

```tsx
<WrappedAiPortalStickyContainer>
  <div
    style={{ padding: "16px", background: "var(--antd-color-bg-container)" }}
  >
    这段内容会在滚动时保持固定
  </div>
</WrappedAiPortalStickyContainer>
```

### Home 变体

使用 home 变体风格，适用于首页场景。

```tsx
<WrappedAiPortalStickyContainer variant="home">
  <div slot="header" style={{ padding: "8px 16px" }}>
    头部内容
  </div>
  <div style={{ padding: "16px" }}>主体内容</div>
</WrappedAiPortalStickyContainer>
```