Sticky Expanding Footer In jQuery And CSS
File Size: | 4.02 KB |
---|---|
Views Total: | 1122 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is a jQuery/CSS based sticky site footer that automatically reveals the bigger footer when you scroll to the very bottom of the webpage.
See It In Action:
How to use it:
1. Create a footer section for your website.
<footer> <div class="mini">Minimal Footer</div> <div class="maxi"> <ul> <li><a href="">Footer Link 1</a></li> <li><a href="">Footer Link 2</a></li> <li><a href="">Footer Link 3</a></li> <li><a href="">Footer Link 4</a></li> <li><a href="">Footer Link 5</a></li> <li><a href="">Footer Link 6</a></li> </ul> <ul> <li><a href="">Footer Link 1</a></li> <li><a href="">Footer Link 2</a></li> <li><a href="">Footer Link 3</a></li> <li><a href="">Footer Link 4</a></li> <li><a href="">Footer Link 5</a></li> <li><a href="">Footer Link 6</a></li> </ul> <ul> <li><a href="">Footer Link 1</a></li> <li><a href="">Footer Link 2</a></li> <li><a href="">Footer Link 3</a></li> <li><a href="">Footer Link 4</a></li> <li><a href="">Footer Link 5</a></li> <li><a href="">Footer Link 6</a></li> </ul> <ul> <li><a href="">Footer Link 1</a></li> <li><a href="">Footer Link 2</a></li> <li><a href="">Footer Link 3</a></li> <li><a href="">Footer Link 4</a></li> <li><a href="">Footer Link 5</a></li> <li><a href="">Footer Link 6</a></li> </ul> </div> </footer>
2. Make the footer stick to the bottom of the webpage.
footer { position: sticky; bottom: 0; transition: all .5s linear; margin-top: 200px; height: 20px; padding: 5px 20px; }
3. Set the height for the footer when collapsed.
footer .mini { height: 40px; }
4. The necessary CSS styles for the footer when expanded.
footer .mini { height: 40px; } .scrolling footer { height: 300px; overflow: hidden; } .scrolling footer .maxi { overflow: visible; } footer { background: #33333f; font-size: 1.2em; } .scrolling footer { background: #66666f; }
5. Include the necessary jQuery library on the web page.
<script src="/path/to/cdn/jquery.min.js"></script>
6. The jQuery script to detect the scroll event and reveal the bigger footer when you scroll down the web page.
$(window).scroll(function() { $("body").removeClass("scrolling"); if($(window).scrollTop() + $(window).height() > ($(document).height() -600) ) { //you are at bottom $("body").addClass("scrolling"); }});
This awesome jQuery plugin is developed by Rachel Reveley. For more Advanced Usages, please check the demo page or visit the official website.