I read about this CSS technique for the first time reading this post from Ryan Fait.
After that, I have seen it has been used in many places and even included in major frameworks.
You only need to structure you page as follow
<html> <body> <div class="st-sticky-wrap"> // You content here <div class="st-sticky-push"></div> </div> <div class="st-sticky-footer"></div> </body> </html>
You can give to the sticky footer the height you need. This height can be expressed in px, ems or% as convenience. For doing that, you need to edit the Stasht.Sticky.css file and change the height in the right places.
A media-query is included for change the height in tablet and desktop devices.
The defaults included are 20em for mobile devices (<768px) and 10em for tablet and desktop (>=768).
No necessary any Javascript
less
For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:
Stashy.Variables.less Stashy.Mixins.less Stashy.Sticky.less