粘性

使元素保持在视窗顶部，例如粘性导航。

用法

要创建一个在向下滚动网站时保持在视窗顶部的元素，请在该元素上添加 `uk-sticky` 属性。

<div uk-sticky></div>

粘贴到顶部

<div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 80">Stick to the top</div>
</div>

注意此页面上的示例元素仅在向下滚动到下一个标题之前是粘性的，之后会消失。这样做是为了避免所有粘性容器的变体使您的屏幕混乱。

定位

默认情况下，元素会粘贴到视窗顶部。您可以设置 `position: bottom` 选项将其粘贴到视窗底部。

<div uk-sticky="position: bottom"></div>

粘贴到底部

<div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="position: bottom; end: !.uk-height-large">Stick to the bottom</div>
</div>

开始

要应用元素开始变为粘性的偏移量，请添加 `start` 选项。值可以是 vh、% 和 px。它支持基本的数学运算符 + 和 -。`0` 的默认值表示元素的顶部边框与视窗的顶部边框相交。CSS 选择器将把开始设置为所选元素的底部边框，以及元素的顶部边框。

<!-- Sticks after 200px scrolling -->
<div uk-sticky="start: 200"></div>

<!-- Sticks after scrolling the elements height -->
<div uk-sticky="start: 100%"></div>

<!-- Sticks after 20vh scrolling -->
<div uk-sticky="start: 20vh"></div>

<!-- Sticks after the top of the selected element -->
<div id="my-id">
    <div uk-sticky="start: #my-id"></div>
</div>

200px

100%

20vh

选择器

<div class="uk-background-muted uk-height-large">

    <div class="uk-child-width-1-4@s" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: 200; end: !.uk-height-large; offset: 80">200px</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: 100%; end: !.uk-height-large; offset: 80">100%</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: 20vh; end: !.uk-height-large; offset: 80">20vh</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: !.uk-height-large; end: !.uk-height-large + div; offset: 80">Selector</div>
        </div>
    </div>

</div>
<div style="height: 200px"></div>

结束

要应用元素停止变为粘性的偏移量，请添加 `stop` 选项。值可以是 vh、% 和 px。它支持基本的数学运算符 + 和 -。`0` 的值表示元素的顶部边框与视窗的顶部边框相交，如果开始也设置为 `0`，则会导致元素根本不粘。CSS 选择器将把结束设置为所选元素的底部，以及元素的底部边框。`false` 将使元素一直粘贴到页面末尾。`true` 将选择父元素。

<!-- Sticks until 200px scrolling -->
<div uk-sticky="end: 200"></div>

<!-- Sticks until scrolling the elements height -->
<div uk-sticky="end: 100%"></div>

<!-- Sticks until 20vh scrolling -->
<div uk-sticky="end: 20vh"></div>

<!-- Sticks until the bottom of the selected element -->
<div uk-sticky="end: #my-id"></div>
<div id="my-id"></div>

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

200px

100%

20vh

选择器

<div class="uk-background-muted uk-height-large">

    <div class="uk-child-width-1-4@s" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: 200; offset: 80">200px</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: 100%; offset: 80">100%</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: 20vh; offset: 80">20vh</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 80">Selector</div>
        </div>
    </div>

</div>

偏移量

要设置元素处于粘性状态时相对于视窗边缘的偏移量，请添加 `offset` 选项。值可以是 vh、% 和 px。它支持基本的数学运算符 + 和 -。

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

粘贴到顶部下方 200px

<div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 200">Stick 200px below the top</div>
</div>

动画

添加来自动画组件的动画，以便在设置开始偏移量后，粘性元素能够平滑地重新出现。

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

动画滑动顶部

<div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: 200; end: !.uk-height-large; offset: 80; animation: uk-animation-slide-top">Animation Slide Top</div>
</div>

向上显示

您可以使粘性元素仅在向上滚动时显示，以节省空间。结合动画，这可以带来非常流畅的体验。

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

向上滚动时滑动进入

<div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 80; show-on-up: true; animation: uk-animation-slide-top">Slide in on scroll up</div>
</div>

响应式

可以通过将 `media` 选项应用于属性并添加适当的视窗宽度，为不同的设备宽度禁用粘性行为。添加像素值，例如 `media: 640`，或断点，例如 `media: @m`。该元素将从指定的视窗宽度开始，以及向上时是粘性的，但在以下宽度时不会。

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

仅在大于 640px 的视窗上为粘性。

<div class="uk-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 80; media: 640">Only be sticky on viewports larger than 640px.</div>
</div>

超大内容

大于视窗的粘性内容将向下滚动并粘贴到视窗底部。更改滚动方向将立即向上滚动粘性内容并将粘性行为更改为粘贴到视窗顶部。向下滚动将再次更改行为。

粘性 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

粘性 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

粘性 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

粘性 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

粘性 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

标题 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

标题 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

标题 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

标题 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

标题 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

标题 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

标题 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

标题 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div id="js-oversized" class="uk-child-width-1-2" uk-grid>
    <div>

        <div class="uk-card uk-card-default uk-card-body uk-position-z-index" uk-sticky="end: #js-oversized; offset: 80">
       
            <h3>Sticky 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Sticky 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Sticky 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Sticky 4</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Sticky 5</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           
        </div>

    </div>
    <div>
        <div class="uk-background-muted uk-padding">

            <h3>Headline 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Headline 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Headline 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Headline 4</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Headline 5</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Headline 6</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Headline 7</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>Headline 8</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

    </div>
</div>

溢出翻转

`overflow-flip` 选项会为超大内容禁用粘性行为。相反，它只会翻转粘性位置，如果元素大于视窗。更改滚动方向不会影响粘性位置。结合 `start` 和 `end` 选项，可以实现两种不错的粘性效果。通过后续内容覆盖元素，或通过先前内容显示元素。

<!-- Section will be covered by the next section -->
<div uk-sticky="overflow-flip: true; end: 100%"></div>

<div>Some section.</div>

<!-- Section will be revealed by the previous section -->
<div uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0"></div>

overflow-flip: true
end: 100%

覆盖上一节。
显示下一节。

position: bottom
overflow-flip: true
start: -100%
end: 0

<div class="uk-position-relative uk-position-z-index-zero">
    <div class="uk-background-primary uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-light uk-height-medium uk-position-z-index-negative" uk-sticky="overflow-flip: true; end: 100%; offset: 80">
        overflow-flip: true<br>
        end: 100%
    </div>
    <div class="uk-background-muted uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-medium">Cover previous section.<br>Reveal next section.</div>
    <div class="uk-background-primary uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-light uk-height-medium uk-position-z-index-negative" uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0">
        position: bottom<br>
        overflow-flip: true<br>
        start: -100%<br>
        end: 0
    </div>
</div>

组件选项

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

选项	值	默认值	描述
`position`	`top`, `bottom`	`top`	元素应粘贴到的位置。
`start`	长度，CSS 选择器	`0`	开始偏移量。值可以是 vh、% 和 px。它支持基本的数学运算符 + 和 -。`0` 的默认值表示元素的顶部边框与视窗的顶部边框相交。CSS 选择器将把开始设置为所选元素的底部边框，以及元素的顶部边框。
`end`	长度，CSS 选择器，布尔值	`false`	结束偏移量。值可以是 vh、% 和 px。它支持基本的数学运算符 + 和 -。`0` 的值表示元素的顶部边框与视窗的顶部边框相交，如果开始也设置为 `0`，则会导致元素根本不粘。CSS 选择器将把结束设置为所选元素的底部，以及元素的底部边框。`false` 将使元素一直粘贴到页面末尾。`true` 将选择父元素。
`offset`	长度	`0`	粘性应固定的偏移量。值可以是 vh、% 和 px。它支持基本的数学运算符 + 和 -。
`overflow-flip`	布尔值	`false`	如果元素溢出视窗，则翻转粘性的位置选项并禁用溢出滚动。
`animation`	字符串	`false`	元素变为粘性时要使用的动画。
`cls-active`	字符串	`uk-active`	活动类。
`cls-inactive`	字符串		非活动类。
`show-on-up`	布尔值	`false`	仅在向上滚动时显示粘性元素。
`media`	数字，字符串	`false`	活动状态的条件 - 一个整数宽度（例如 640）或一个断点（例如 @s、@m、@l、@xl）或任何有效的媒体查询（例如 (min-width: 900px)）。
`target-offset`	`false`，长度	`false`	最初确保粘性元素不会覆盖页面位置哈希引用的元素。偏移量由元素距离所引用元素多远来定义。`false` 将禁用此行为。

JavaScript

了解更多关于 JavaScript 组件的信息。

初始化

UIkit.sticky(element, options);

事件

以下事件将在附有此组件的元素上触发

名称	描述
`active`	在元素变为粘性后触发。
`inactive`	在元素不再粘性后触发。

文档

粘性

粘性 1

粘性 2

粘性 3

粘性 4

粘性 5

标题 1

标题 2

标题 3

标题 4

标题 5

标题 6

标题 7

标题 8