Amaze UI

JS 插件

Amaze UI JS 插件,使用注意事项,以及 JS 插件介绍。

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距离底部小于该数值时不再往下滚动,避免覆盖下面的元素

注意事项

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