Amaze UI

Sticky


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

基础使用

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

Copy
<div data-am-sticky>
  <button class="am-btn am-btn-primary am-btn-block">固定顶部</button>
</div>

在元素上添加 data-am-sticky 属性即可实现效果。

设置上边距

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

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

动画效果

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

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

调用方式

通过 Data API

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

通过 JS

通过 $.sticky(options) 设置。

Copy
<div id="my-sticky">
  <button class="am-btn am-btn-danger">在距离头部150px的地方出现。</button>
</div>
<script>
$(function() {
$('#my-sticky').sticky({
    top: 150,
    bottom: function() {
      return $('.amz-footer').height();
    }
  });
});
</script>

选项

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

注意事项

  • Sticky 插件是监听窗口滚动事件,当滚动距离超过元素上边距时,添加 .am-sticky 类,将元素的 position 设置为 fixed,同时设置一个 top 值(默认为 0)。
  • 插件初始化的时候会给在元素外面包裹 .am-sticky-placeholder 作为占位符避免页面抖动,有可能会影响使用使用子选择的样式。
  • 已知问题:如果设置了动画,窗口快速 resize 时,动画会执行多次。