Thursday, June 4FreeJQuery

How to Create Sticky Footer


StickyFooter.js

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: fixedposition: 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.

<header class=”header”>
<h1>Header</h1>
</header>

<nav class=”nav”>
<h2>Nav</h2>
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</nav>

<main class=”main-content”>
<h3>Hello</h3>
<p>Main Content</p>
</main>

<footer class=”footer”>
<p>Footer</p>
</footer>

2. Insert the JavaScript file sticky-footer.min.js into the document.

<script src=”/path/to/cdn/jquery.slim.min.js></script>
<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.

;(function(jQuery, StickyFooter) {

“use strict”;

var init = function() {
new StickyFooter(“.main-content”);
};

jQuery(window).on(“load”, init);

})(jQuery, StickyFooter);

 Download

 

Leave a Reply

Your email address will not be published. Required fields are marked *