Stick Footer To The Bottom When Body Content Is Short - jQuery downBoy
File Size: | 10.7 KB |
---|---|
Views Total: | 474 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
downBoy is a really simple jQuery plugin that pushes your <footer>
element to the bottom of the page in cases where the screen's height is larger than body's height.
How it works:
- Check if
$(window).height()
>$('body').height()
- If true, the plugin applies CSS
position: absolute
to the<footer>
element within the page.
How to use it:
1. Download and insert the jquery.downboy.js
script into the page which has jQuery library installed.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.downboy.min.js"></script>
2. Initialize the plugin on your <footer>
element.
<footer> ... Footer Content ... </footer>
$(function() { downBoy('footer'); });
3. Re-init the plugin on window resize.
window.onresize = function() { downBoy('footer'); };
4. You can also load the jquery.downboy.auto.min.js
script to automatically initialize the plugin without any JS call.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="jquery.downboy.auto.min.js"></script>
This awesome jQuery plugin is developed by eustasy. For more Advanced Usages, please check the demo page or visit the official website.