Auto Show/Hide Sliding Page Footer With jQuery And CSS3 - footerMenu

File Size: 3.63 KB
Views Total: 5678
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Show/Hide Sliding Page Footer With jQuery And CSS3 - footerMenu

A jQuery based smart sticky footer that reveals a footer panel on scroll down and hides it on scroll up. With a smooth sliding effect based on CSS3 transitions. Useful for things like fixed footer navigation or recommended content of your website when the visitor scrolls down to the bottom of your webpage.

How to use it:

1. Create a footer navigation menu for your webpage.

<div id="footerMenu">
  <div class="content-wrap">
    <ul class="navigation">
      <li><a href="#menu1">menu1</a></li>
      <li><a href="#menu2">menu2</a></li>
      <li><a href="#menu3">menu3</a></li>
      <li><a href="#menu4">menu4</a></li>
      <li><a href="#menu5">menu5</a></li>
      <li><a href="#menu6">menu6</a></li>
    </ul>
  </div>
</div>

2. Style the navigation and make it stick to the bottom of the webpage.

#footerMenu {
  background: #7CA1CA;
  color: #FFF;
  width: 100%;
  height: 0px;
  position: fixed;
  z-index: 300;
  bottom: 0;
  overflow: none;
  left: 0;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

#footerMenu.show {
  height: 65px;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

#footerMenu ul.navigation li {
  float: left;
  margin-right: 16px;
  display: block;
}

#footerMenu ul.navigation li a:hover {
  background-color: #555;
  color: white;
}

3. Put the needed jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.12.2.min.js"></script>

4. The core JavaScript to toggle the CSS classes when you scroll down/up the webpage.

(function( $ ){
  $.fn.footerMenu = function() {
    $(window).scroll(function() {
      if ($(document).scrollTop() > 100) {
        $('#footerMenu').addClass("show");
      } else {
        $('#footerMenu').removeClass("show");
      }
    });
  };
})( jQuery );

This awesome jQuery plugin is developed by fpmweb. For more Advanced Usages, please check the demo page or visit the official website.