粘附／Sticky

# 粘附／Sticky

<p class="uk-text-lead">使元素保留在视口的顶部，就像粘性导航一样。</p>

## Usage-用法

要创建在向下滚动站点时仍保持在视口顶部的元素，添加 `uk-sticky` 属性到该元素。

```html
<div uk-sticky></div>
```

```example
<div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="bottom: #offset">Stick to the top</div>
```

**注意** 上方示例中的元素只在向下滚动到下一个标题之前是粘附的，随后会消失。这样做是为了避免你的屏幕上堆满一大堆的粘性容器使屏幕看起来杂乱不堪。

***

## Offset-偏移量

可以将元素定位在视口边缘的下方一点的位置。需要添加 `offset` 属性以及以像素为单位的距离值。

```html
<div uk-sticky="offset: 100"></div>
```

```example
<div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="offset: 100; bottom: #top">Stick 100px below the top</div>
```

***

## Top

要延迟应用粘附行为，请添加 `top` 属性，该属性的值可以由以像素为单位的数字定义偏移量，也可以由视口高度或CSS选择器定义。

```html
<!-- Sticks after 100px of scrolling -->
<div uk-sticky="top: 100"></div>

<!-- Sticks after 100vh -->
<div uk-sticky="top: 100vh"></div>

<!-- Sticks to the top of the container -->
<div id="my-id">
    <div uk-sticky="top: #my-id"></div>
</div>
```

```example
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="top: 200; bottom: #animation">Stick to the top but only after 200px scrolling</div>
    </div>
    <div>
        <div id="container-1" class="uk-background-muted uk-height-medium" style="margin-bottom: 200px;">
            <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="top: #container-1; bottom: #animation">Stick to the top but below the box</div>
        </div>
    </div>
</div>
```

***

## Animation-动画

添加 [Animation 组件](animation.md) 中的动画效果，可以使粘附元素平滑地再次出现。

```html
<div uk-sticky="animation: uk-animation-slide-top"></div>
```

```example
<div class="uk-card uk-card-default uk-card-body" style="margin-bottom: 200px; z-index: 980;" uk-sticky="top: 100; animation: uk-animation-slide-top; bottom: #sticky-on-scroll-up">Animation Slide Top</div>
```

***

## Sticky on scroll up-向上滚动时的粘附

可以使粘附元素只在在向上滚动时才显示，这样可以以节省网页空间。结合动画效果，可以带来非常流畅的体验。

```html
<div uk-sticky="show-on-up: true"></div>
```

```example
<div class="uk-card uk-card-default uk-card-body" style="margin-bottom: 200px; z-index: 980;" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; bottom: #bottom">Slide in on scroll up</div>
```

***

## Bottom

将粘附行为绑定到指定元素，使其在页面滚动过的该元素后就不再显示粘附的元素。

```html
<!-- Sticks until the bottom of its parent container -->
<div>
    <div uk-sticky="bottom: true"></div>
</div>

<!-- Sticks until the second container -->
<div uk-sticky="bottom: #my-id"></div>
<div id="my-id"></div>
```

```example
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-background-muted uk-height-medium">
            <div class="uk-height-medium uk-background-muted">
                <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="bottom: true">Stick until the bottom of its parent container</div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="bottom: #container-2">Stick until the next headline</div>
        </div>
    </div>
</div>

<h3 id="container-2">Some Headline</h3>

```

***

## Responsive-响应式

通过对 `uk-sticky` 属性上添加 `media` 选项并添加适当的视口宽度，可以针对不同设备宽度禁用粘滞行为。 添加一个以像素为单位的数字，例如 `media：640` ，或一个断点，例如`media：@ m`。 元素将在指定的视口宽度以上的设备带有粘附效果，低于该宽度则不显示。

```html
<div uk-sticky="media: 640"></div>
```

***

## Component options-组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项               | 可用值 | 默认值         | 描述  |
|:------------------|:---------|:------------|:--------------------------------------------------|
| `top`            | Number, viewport height, CSS selector | `0`         | 元素应粘贴的顶部偏移量                                                                           |
| `bottom `        | Boolean, CSS selector                 | `false`     | 直到元素开始粘附的底部偏移量。如果 `bottom` 是元素，则使用其底部偏移量。(true: 父元素，前缀为 '!' 父选择器)   |
| `offset `        | String                                | `0`         | 粘附元素的偏移量                                                                              |
| `animation `     | String                                | `false`     | 元素开始粘附时的动画。                                                                           |
| `cls-active`     | String                                | `uk-active` | 激活的class(元素粘附时添加的class) |
| `cls-inactive`   | String                                | `''`        | 非活动的class(元素未粘附时添加的class) |
| `width-element`  | CSS selector                          | `false`     | 粘附模式下获取宽度的CSS选择器                                                                      |
| `show-on-up`     | Boolean                               | `false`     | 只在向上滚动时显示粘附的元素                                                                        |
| `media `         | Integer, String                       | `false`     | 激活粘附状态的条件-可以是数值为整数的宽度（例如640），或断点（例如@ s，@ m，@ l，@ xl），或任何有效的媒体查询（例如(min-width: 900px)） |
| `target-offset ` | Boolean, Number                       | `false`     | 确保附着元素不会在DOM就绪后通过位置 hash（location hash）越过目标元素。  |

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容

### 初始化

```js
UIkit.sticky(element, options);
```

### 事件

将在附加了此组件的元素上触发以下事件：

| Name       | 描述      |
|:-----------|:--------|
| `active`   | 开始粘附后触发 |
| `inactive` | 不再粘附后触发 |