sticky footer short page - Free Download Create Sticky Footer For Short Page - StickyFooter.js

Free Download Create Sticky Footer For Short Page – StickyFooter.js

Posted on

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.

sticky footer short page - Free Download Create Sticky Footer For Short Page - StickyFooter.js
File Size: 78.6 KB
Views Total: 580
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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">
02   <h1>Header</h1>
03 </header>
04  
05 <nav class="nav">
06   <h2>Nav</h2>
07   <ul>
08     <li>Item one</li>
09     <li>Item two</li>
10   </ul>
11 </nav>
12  
13 <main class="main-content">
14   <h3>Hello</h3>
15   <p>Main Content</p>
16 </main>
17  
18 <footer class="footer">
19   <p>Footer</p>
20 </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) {
02  
03   "use strict";
04  
05   var init = function() {
06       new StickyFooter(".main-content");
07   };
08  
09   jQuery(window).on("load", init);
10  
11 })(jQuery, StickyFooter);

Changelog:

2020-04-23

  • v2.0.0

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.