Responsive Any Element Sticky Plugin For jQuery - sticky-items

Yet another jQuery plugin that makes any matched html elements floating and sticky at the top of the webpage as you scroll down. The plugin gets the current position of the item on the page, so that it will only stick to the top from that point down. It also has the ability to re-calculate the scroll position on window resize so that it works on any responsive web layout and even mobile devices.

Basic usage:

1. The plugin requires jQuery library 1.12+ to work:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="res/js/sticky.js"></script>

2. Call the stickyItem function on the desired element. A '.is-sticky' CSS class will be added to the matched element if it becomes sticky.

$('#sticky-item').stickyItem();

3. Set the top offset in pixels when the element becomes sticky.

$('#sticky-item').stickyItem({
  top:'60px'
});

4. Set the background color of your sticky element.

$('#sticky-item').stickyItem({
  background: '#ffffff'
});

5. Set the original width for your responsive design. If the browser window is smaller than the item's original size, the plugin will set the current width to the window size ;else set to originalWidth.

$('#sticky-item').stickyItem({
  background: '#ffffff'
});

6. Set the z-index.

$('#sticky-item').stickyItem({
  layer: 99
});

7. All default config options.

$('#sticky-item').stickyItem({

  top: 0,
  left: 'autoload',
  background: 'transparent',

  // sticky item max-width setting, is responsive by default up to max-width
  originalWidth: 0,

  // z-index layer
  layer: 99,

  // extend styles for the parent element
  parentStyles: {},

  // extend styles for the item element
  itemStyles: {},

  // extend styles for the children element(s)
  childrenStyles: {},

  // debug mode
  debug: false
  
});

Change log:

2017-05-17

• Added extra feature to include a named wrapper around the item inside of the initial wrapper.

2017-05-15

• fix bug when initializing the element for the first time.

2016-11-15

• updated sticky js with new functions

---

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