Sticky Expanding Footer In jQuery And CSS

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.