jQuery Plugin For Responsive Stick Elements - stickit

stickit is a responsive, robust, cross-browser jQuery sticky plugin used to make any elements (headers, sidebars) be fixed on the top while vertical page scrolling. It comes with an useful option which allows your element to be stuck within its parent container or the whole document. Also allows to disable the 'sticky' behavior when the screen size is less than a specific breakpoint.

Basic usage:

1. Link to jQuery library and other required resources as follow:

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

2. Call the plugin on any element you want to stick to the top on page scroll.

$('#header').stickit();

3. Available plugin options.

$('#header').stickit({

  // or StickScope.Document
  scope: StickScope.Parent,

  // Class for sticky element
  className: 'stick',

  // top offset
  top: 0,

  // CSS z-index value
  zIndex: 100,

  // extra height
  extraHeight: 0,

  /*
  {
    screenMinWidth: 1024    // apply if width >= 1024
  }, {
    screenMinWidth: 768,    // apply if width >= 768 && width <= 1023
    screenMaxWidth: 1023,
    top: 10
  }, {
    screenMaxWidth: 767,    // apply if width <= 767
    top: 20
  }
  */
  screenMinWidth: undefined,
  screenMaxWidth: undefined,

  // enable scrolling sticky element when its height is higher than the screen
  overflowScrolling: true,

});

4. Callback functions.

$('#header').stickit({

  // when stuck
  onStick: function(){},

  // when unstuck
  onUnstick: function(){},

  // when arriving the end of container/document
  onEnd: function(){},

  // when leaving the end of container/document
  onUnend: function(){},

});

5. API methods.

// destroy
$('#header').stickit('destroy');

// refresh
$('#header').stickit('refresh');

// refresh all
$.stickit.refresh();

Change log:

2017-08-21

• Fixed Top (offset) problem

2017-02-20

• Fixed refresh issue in chrome. 

---

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