Stickr.js是一个小巧而智能的jQuery粘性插件，它能够将一个或多个元素固定到容器的顶部，同时将它们保持在父容器的边界内。

特征：

• 使用平滑的动画将元素粘贴到顶部。
• 可选的关闭按钮可禁用粘性行为。
• 可配置的顶部/底部偏移。

如何使用它:

1.在jquery之后下载并加载jquery.stickr.min.js脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.stickr.min.js"></script>

2.调用你的元素上的函数，插件会处理剩下的。在下面的例子中，插件会让每个边栏在.容器元素，从顶部偏移20像素。

<section class="container">
  <aside id="sidebar">
    Sidebar Content Here
  </aside>
</section>

$('#sidebar').stickr({
  offsetTop: 20,
});

3.配置动画。将持续时间设置为0将禁用粘性行为。

$('#sidebar').stickr({
  easing: 'swing',
  duration: 500,
  queue: false, // whether the animation is placed into the queue
});

4.配置关闭按钮。

$('#sidebar').stickr({
  closeButton: true,
  closeChar: 'X',
  closeTop: 0,
  closeRight: 0,
});

5.设置粘性元件的顶部和底部偏移。

$('#sidebar').stickr({
  offsetTop: 0,
  offsetBottom: 0,
});

6.指定应在其中固定元素的容器。默认值：null（父容器）。

$('#sidebar').stickr({
  closest: string,
});

预览截图

jQuery Stickr.js插件使多个元素保持一致