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

  • 源码大小:8.71KB
  • 所需积分:1积分
  • 源码编号:19JP-3135
  • 浏览次数:707次
  • 最后更新:2023年05月09日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

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

特征:

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

如何使用它:

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

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

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

  1. <section class="container">
  2. <aside id="sidebar">
  3. Sidebar Content Here
  4. </aside>
  5. </section>
  1. $('#sidebar').stickr({
  2. offsetTop: 20,
  3. });

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

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

4.配置关闭按钮。

  1. $('#sidebar').stickr({
  2. closeButton: true,
  3. closeChar: 'X',
  4. closeTop: 0,
  5. closeRight: 0,
  6. });

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

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

6.指定应在其中固定元素的容器。默认值:null(父容器)。

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

预览截图