jQuery Plugin For Sticky Footer Elements - Sticky Footer Bar

File Size: 86.9 KB
Views Total: 3822
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Sticky Footer Elements - Sticky Footer Bar

Sticky Footer Bar is a simple lightweight jQuery plugin helps you stick your footer bar to the bottom of the web page as you scroll down.

See also:

How to use it:

1. Include jQuery javascript library and the jQuery sticky footer bar plugin at the end of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.stickyfooterbar.js"></script> 

2. Create footer elements that will be sticky at the bottom of the browser window.

<div id="my-footer">
<div id="sticky-footer">
Sticky content goes here

3. Call the plugin on the DIV element you just created.

<script type="text/javascript">
$(document).ready(function() {

4. Style the footer elements whatever you like.

#my-footer {
#sticky-footer {

5. Parameters.

  • heightOrObj - If this is a number it is used as height for the fixed footer bar. If it's a jQuery-selector-string or a jQuery-object the height of the object is used (calculated by $obj.outerHeight()). Default: height of the object stickyfooterbar is used on
  • classname   - A css class which is add to the object this function is used on, if it is made sticky. Deault: 'sticky'

Change log:


  • bugfix: do nothing if window is too small
  • problems with scrolling, inserting a placeholder element while footer is sticky

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