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,
- });