Tiny jQuery Sticky Footer Plugin - stickyfoot

File Size: 147 KB
Views Total: 2298
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny jQuery Sticky Footer Plugin - stickyfoot

Have noticed that there're a lot of sticky header jQuery plugins out there. Today, I'm going to introduce a jQuery plugin called stickyfoot that makes the element sticky at the bottom of the page and reveals the more content of the element when scroll down to the bottom of your page.

How to use it:

1. Include jQuery javascript library and jQuery stickyfoot plugn in the html document.

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

2. Add the following Html snippet at the bottom of your page.

<footer>
<div class="sticky-toe">
<p>Title</p>
</div>
<div class="sticky-heel">
<nav>
<p><a href="/">Menu 1</a></p>
<p><a href="/">Menu 2</a></p>
</nav>
<p>Content</p>
</div>
</footer>

3. The required CSS styles to make the footer element sticky at the bottom.

.sticky-toe, .sticky-heel {
overflow: hidden;
}
.fix-foot {
position: fixed;
bottom: 0;
}

4. Call the plugin on the footer element.

$(document).ready(function(){	
$('footer').stickyFoot();		
});

Change log:

2014-01-21

  • updated demo design

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