在微信上关注我们
当窗口滚动至元素上边距离时，将元素固定在窗口顶部。
在元素上添加 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-am-sticky 属性。
通过 $.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 | 距离底部小于该数值时不再往下滚动，避免覆盖下面的元素 |
.am-sticky 类，将元素的 position 设置为 fixed，同时设置一个 top 值（默认为 0）。.am-sticky-placeholder 作为占位符避免页面抖动，有可能会影响使用使用子选择的样式。resize 时，动画会执行多次。