This time I will share jQuery Plugin and tutorial about Create Sticky Footer For Short Page – StickyFooter.js, hope it will help you in programming stack.
A super tiny (<1kb minified) jQuery sticky footer plugin that makes the footer element always stay at the bottom of the webpage even if the page is too short.
Without the need of CSS position: fixed
, position: absolute
, or position: sticky
property.
The plugin detects if the height of your content is shorter than the screen height and then extends the main content to fill the difference.
Licensed under the GNU General Public License v3.0.
How to use it:
1. Create a footer element for your webpage.
01 |
< header class = "header" > |
13 |
< main class = "main-content" > |
18 |
< footer class = "footer" > |
2. Insert the JavaScript file sticky-footer.min.js
into the document.
1 |
< script src="/path/to/cdn/jquery.slim.min.js></ script > |
2 |
< script src = "/path/to/src/sticky-footer.js" ></ script > |
3. Call the function StickyFooter
on the main content and the plugin will take care of the rest.
01 |
;( function (jQuery, StickyFooter) { |
05 |
var init = function () { |
06 |
new StickyFooter( ".main-content" ); |
09 |
jQuery(window).on( "load" , init); |
11 |
})(jQuery, StickyFooter); |
Changelog:
2020-04-23
2020-02-04
This awesome jQuery plugin is developed by jahidulpabelislam. For more Advanced Usages, please check the demo page or visit the official website.