粘附

Sticky效果。使元素始终保持在时候顶部，比如常见的的附着在顶部的导航栏。

用法

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

<div uk-sticky></div>

Stick to the top

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

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

偏移量

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

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

Stick 100px below the top

<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选择器定义。

<!-- 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>

Stick to the top but only after 200px scrolling

Stick to the top but below the box

<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 组件中的动画效果，可以使粘附元素平滑地再次出现。

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

Animation Slide Top

<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>

向上滚动时的粘附

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

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

Slide in on scroll up

<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

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

<!-- 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>

Stick until the bottom of its parent container

Stick until the next headline

Some Headline

<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>

响应式

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

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

组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。了解更多

Option	Value	Default	Description
`top`	Number, viewport height, CSS selector	`0`	元素粘附顶部的偏移量。
`bottom`	Boolean, CSS selector	`false`	直到元素开始粘附的底部偏移量。（true：父元素，以“！”为前缀的父元素选择器）
`offset`	String	`0`	粘附元素的偏移量
`animation`	String	`false`	元素开始粘附时的动画。
`cls-active`	String	`uk-active`	元素粘附时添加的 class
`cls-inactive`	String	`''`	元素未粘附时添加的 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 组件的内容。

初始化

UIkit.sticky(element, options);

事件

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

Name	Description
`active`	开始粘附后触发
`inactive`	不再粘附后触发

UIkit3.x文档

Some Headline