jQuery Plugin For Sticky Header & Footer - Sticky Hooters

jQuery Plugin For Sticky Header & Footer - Sticky Hooters
File Size: 19.6 KB
Views Total: 845
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Just another jQuery plugin for sticky elements that provids sticky header and footer functionality for tables and lists. Requires jQuery throttle / debounce plugin.

Basic usage:

1. Load the necessary jQuery library and the jQuery throttle / debounce plugin in the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.ba-throttle-debounce.min.js"></script>

2. Download and load the jQuery Sticky Hooters plugin after jQuery library.

<script src="jquery.sticky-hooters.js"></script>

3. Call the plugin on the container to enable sticky header and sticky footer. Configuration object is optional.


  // default is 'tfoot'
  footerSelector: '<footer-selector>', 

  // default is 'thead',
  headerSelector: '<header-selector>' 

  // (CSS value) default is '0'
  top: '<number><units>', 

  // (CSS value) default is '0'
  bottom: '<number><units>' 


Change log:


  • Update sticky elements z-index

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