jquery.stickyFooter is a jQuery plugin that convert elements to be sticky.
With stickyFooter applied, all kind of element can be converted to be sticky in many ways. It takes also responsive desing in account.
npm install jquery.eqHeight
bower install jquery.stickyFooter
Please note that you have to include stickyFooter after jQuery.
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- put stickyFooter after jQuery -->
<script src="jquery.stickyfooter.js"></script>
Using stickyFooter is simple. You have to specify a CSS3 selector for element.
Say your HTML looks like this:
<div id="footer">
</div>
A simple stickyFooter setup for the above HTML would be:
<script>
$(document).ready(function() {
$("#footer").stickyfooter();
});
</script>
Remove any negativ margin if present
$("#footer").eqHeight({
removeNegativMargin: true
});
Apply extra CSS to the footer
$("#footer").eqHeight({
css: {
height: 400,
width: 1200,
background: "#000"
}
});
Simple condition whether the plugin has to be execute or not
$("#footer").eqHeight({
executeWhen: function (){
return $(window).width() > 500; //only execute when the screen resolution is greater then 500px
}
});