粘连

让页面元素保持在视口顶部,比如粘连的导航栏。

用法

创建一个能在页面滚动时能保持在视口顶部的页面元素,添加 data-sticky 属性到该元素即可。

示例

粘连在顶部

代码

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

赋予偏移量

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

示例

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

代码

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

粘连的边界

可以通过设置 boundary 参数定义粘连元素的边界。这会使粘连元素保持在边界元素的范围内。

示例

粘连限制在其父块容器中
粘连到分界元素顶部
分界元素

代码

<!-- 粘连限制在其父块容器中 -->
<div data-sticky="{boundary: true}">...</div>
<!-- 粘连到分界元素顶部 -->
<div data-sticky="{boundary: '#my-id'}">...</div>

响应式行为

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

代码

<!-- 设置粘连可用的最小屏幕宽度 -->
<div data-sticky="{media: 640}">...</div>
<!-- 这是一个使用最小宽度和方向特性的媒体字符串 -->
<div data-sticky="{media: '(min-width: 640px) and (orientation: landscape)'}">...</div>