Make Multiple Elements Stick With jQuery Stickr.js Plugin

Stickr.js is a tiny and smart jQuery sticky plugin that has the ability to pin one or more elements to the top of the container while keeping them within the boundaries of their parent container.

Features:

• Stick elements to the top with a smooth animation.
• Optional close button to disable the sticky behavior.
• Configurable top/bottom offsets.

How to use it:

1. Download and load the jquery.stickr.min.js script after jQuery.

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

2. Call the function on your element(s) and the plugin will take care of the rest. In the example below, the plugin will make each the sidebar sticky within the .container element, with a 20px offset from the top.

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

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

3. Config the animation. Setting the duration to 0 will disable the sticky behavior.

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

4. Config the close button.

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

5. Set the top and bottom offsets of the sticky element(s).

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

6. Specify the container in which the element(s) should be fixed. Default: null (parent container).

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

---

This awesome jQuery plugin is developed by dreamhigh0525. For more Advanced Usages, please check the demo page or visit the official website.