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
   
Stick Footer To The Bottom When Body Content Is Short - jQuery downBoy

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:

  1. Check if $(window).height() > $('body').height()
  2. 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.