粘性

使元素保持在视口顶部，就像粘性导航栏一样。

用法

要创建一个在向下滚动页面时保持在视口顶部的元素，请将 data-uk-sticky 属性添加到该元素。

示例

固定在顶部

标记

<div data-uk-sticky>...</div>

定义偏移量

您还可以将元素定位在视口边缘下方。例如，添加 data-uk-sticky="{top:100}" 属性以创建 100px 的边距。

示例

在顶部下方 100px 处固定

标记

<div data-uk-sticky="{top:100}">...</div>

添加延迟

要为元素添加延迟，使其仅在滚动指定距离后才变为粘性，您需要在数据属性中添加负偏移量，例如 data-uk-sticky="{top:-200}"。您还可以从动画组件添加动画，以便使粘性元素平滑地重新出现。

示例

固定在顶部，但仅在滚动 100px 后

标记

<div data-uk-sticky="{top:-200, animation: 'uk-animation-slide-top'}">...</div>

响应式行为

您还可以通过在数据属性中添加断点选项来禁用不同设备的粘性行为，例如 data-uk-sticky="{media: 640}"。此外，您可以使用任何有效的媒体查询。

标记


                                <!-- This is basically a shortcode to define a min-width -->
                                <div data-uk-sticky="{media: 640}">...</div>

                                <!-- This is a media string using the min-width and orientation properties -->
                                <div data-uk-sticky="{media: '(min-width: 640px) and (orientation: landscape)'}>...</div>

粘性边界

您可以通过设置 boundary 参数来定义粘性元素的边界。这会将粘性元素保持在边界元素的尺寸内。

示例

粘性元素绑定到父容器

只要边界元素在视图中就保持粘性

边界元素

标记


                                <!-- Bind sticky to its parent element -->
                                <div data-uk-sticky="{boundary: true}">...</div>

                                <!-- Bind sticky to any element -->
                                <div data-uk-sticky="{boundary: '#my-id'}">...</div>

JavaScript 选项

选项	可能的值	默认值	描述
`top`	整数	0	触发粘性时的顶部偏移量
`animation`	字符串	''	UIkit 动画类
`clsinit`	字符串	uk-sticky-init	元素首次变为粘性时的初始化类
`clsactive`	字符串	uk-active	当元素粘性时要添加的活动类
`clsinactive`	字符串	''	当元素不粘性时要添加的类
`getWidthFrom`	字符串	''	在粘性模式下从中获取宽度的 CSS 选择器。默认情况下，它从创建的包装元素中获取宽度。
`media`	整数 / 字符串	false	活动状态的条件，整数（例如 640）或 CSS 媒体查询作为宽度
`target`	布尔值	false	确保粘性元素在 DOM 就绪时不会通过位置哈希覆盖目标元素。
`showup`	布尔值	false	仅在向上滚动时显示粘性元素。
`boundary`	混合类型	false	设置为 `true` 以将粘性绑定到父元素，或设置为 CSS 选择器以将粘性绑定到特定元素。

手动初始化元素

var sticky = UIkit.sticky(element, { /* options */ });

事件

名称	参数	描述
`active.uk.sticky`	event	元素变为粘性
`inactive.uk.sticky`	event	元素离开粘性模式