# 附着/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  ### Markup ``` <div data-uk-sticky="{top:100}">...</div> ``` * * * ## 添加延迟 为元素添加延迟，这样使它能在页面滚动特定距离后才变成粘连状态，你需要添加一个负偏移值到data属性，比如 `data-uk-sticky="{top:-200}"`。还可以添加[动画](animation.html)让元素可以平滑地再次出现。 ### Example  ### 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  ### 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 | 脱离附着状态 |