StickyFooter.js
What?
A very small and lightweight plugin to create a sticky footer just using JavaScript/jQuery.
If the original/normal height of the page is shorter than the window height, the library will extend the 'main content' element to fill the remaining space. This will essentially push the footer
element down to the bottom of the page creating the sticky footer.
- lightweight - file size: 4kb & 1kb minified, package size: 65kb & 21kb minified
- one & only dependency is jQuery
- all major browsers supported
- no extra CSS needed
- simple to use
Why?
I decided to create this plugin as I have found myself recreating and using this effect/code in all my projects, so thought it would be better to only have it in one place. This makes it easier to maintain all uses of this effect. While also helping the developer community, with this small helper plugin for the front-end.
How?
Requirements
- jQuery v1+
Installation
Firstly you will need a copy of one of two js
files either the minified or non-minified version (sticky-footer.min.js
or sticky-footer.js
).
You can install it in various ways:
- via NPM -
npm install sticky-footer.js
(https://www.npmjs.com/package/sticky-footer.js) - using jsDelivr CDN - https://www.jsdelivr.com/package/npm/sticky-footer.js (for example
https://cdn.jsdelivr.net/npm/sticky-footer.js@1.3.0/src/sticky-footer.min.js
) - download file directly
Set up
Next insert the script link into your HTML (sticky-footer.min.js
or sticky-footer.js
).
Then in your JavaScript, call the StickyFooter.js function by jQuery({mainContentSelector}).adjustHeightForScreen();
(for example jQuery(".main-content").adjustHeightForScreen();
)
Support
jQuery
Has been tested with all major versions
Browser
Has been tested on all major browsers
- Chrome
- Firefox
- Safari
- Android Browser
- Edge
- IE
- Opera
License
This project is licensed under the terms of the GNU General Public License v3.0 license.