Question

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

用法

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

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

赋予偏移量

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

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

添加延迟

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

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

响应式行为

还可以通过在data属性中添加断点选项，来实现在不同设备上禁用粘连行为，比如 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	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	脱离附着状态