Sticky


当窗口滚动至元素上边距离时,将元素固定在窗口顶部。

基本演示

基本形式

在元素上添加 data-am-sticky 属性。

<div data-am-sticky>
  <button class="am-btn am-btn-primary am-btn-block">Stick to top</button>
</div>

设置上边距

元素固定到窗口顶部后,默认上边距为 0,可以在设置上边距 data-am-sticky="{top:100}"

<div data-am-sticky="{top:80}">
  <button class="am-btn am-btn-primary">Stick 80px below the top</button>
</div>

动画效果

使用 CSS3 动画 实现动画效果。

<div data-am-sticky="{animation: 'slide-top'}">
  <button class="am-btn am-btn-success am-btn-block">固定到顶部动画效果</button>
</div>

调用方式

通过 Data API

如上面的演示所示,在元素上添加 data-am-sticky 属性。

通过 JS

通过 $.sticky(options) 设置。

<div id="my-sticky">
  <button class="am-btn am-btn-danger">Stick via JavaScript</button>
</div>
<script>
$(function() {
  $('#my-sticky').sticky({
    top: 150
  })
});
</script>

选项

参数 类型 默认 描述
top 数值 0 距离顶部位置
animation 字符串 '' 动画名称
bottom 数值
或返回数值的函数
0 距离底部小于该数值时不再往下滚动,避免覆盖下面的元素

注意事项