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:

• Tiny jQuery Sticky Footer Plugin - stickyfoot

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
</div>
</div>

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

<script type="text/javascript">
$(document).ready(function() {
$('#my-footer').stickyfooterbar('#sticky-footer');
});
</script>

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:

2014-03-29

• 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.