附着/Sticky

让页面元素保持在视口顶部，比如跟随滚动的导航栏。

用法

创建一个能在页面滚动时能保持在视口顶部的页面元素，添加 data-uk-sticky 属性到该元素即可。注意使用此组件需要额外添加 sticky.css 文件，在css/components文件夹中。此组件需要额外添加 sticky.js 文件，在js/components文件夹中。

Example

附着在顶部

Markup

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

赋予偏移量

还可以定位元素处于视口边缘下的位置。比如，添加 data-uk-sticky="{top:100}" 属性创建100px的margin。

Example

在距离顶部边缘100px的位置

Markup

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

添加延迟

为元素添加延迟，这样使它能在页面滚动特定距离后才变成粘连状态，你需要添加一个负偏移值到data属性，比如 data-uk-sticky="{top:-200}"。还可以添加动画让元素可以平滑地再次出现。

Example

滚动100px后再粘连在顶部

Markup

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

响应式行为

还可以通过在data属性中添加断点选项，来实现在不同设备上禁用粘连行为，比如 data-uk-sticky="{media: 640}" 。另外，还可以使用媒体查询来控制。

Markup


                                <!-- 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 参数定义元素附着行为的边界，使其只在该范围内跟随滚动。

Example

Sticky bound to parent container

Sticky as long as bondary element is in view

Boundary element

Markup


                                <!-- 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`	integer	0	触发附着行为的顶部偏移量
`animation`	string	''	UIkit 的动画 class
`clsinit`	string	uk-sticky-init	元素首次附着时进行初始化的class
`clsactive`	string	uk-active	元素附着时添加的 class
`clsinactive`	string	''	元素未附着时添加的 class
`getWidthFrom`	string	''	粘连模式下获取宽度的CSS选择器。默认情况下它从已创建的外层元素获取宽度值。
`media`	integer / string	false	激活状态所需的整型宽度条件，或CSS媒体查询
`target`	boolean	false	确保粘连元素不会在DOM就绪后通过位置散列（location hash）越过目标元素。
`showup`	boolean	false	是否仅在滚动时显示附着的元素
`boundary`	mixed	false	设置为 `true` 将粘连绑定到父元素或使用CSS选择器将粘连绑定到特定元素。

手动初始化元素

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

事件

名称	参数	描述
`active.uk.sticky`	event	获得附着效果
`inactive.uk.sticky`	event	脱离附着状态