Footer to animate in on scroll

Question

I currently have the footer appearing once the page has scrolled past a set point but would like to make it reveal as the user scrolls instead of just appearing on screen (as it currently does).

Would be interested to know if it can be achieved with CSS transitions or best practise.

Live example http://jsfiddle.net/robcleaton/3zh6h/

CSS

#footer {
    background: black;
    width: 100%;
    height: 48px;
    position: fixed;
    z-index:300;
    bottom: 0;
    display: none;
}

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

​JS

$(function(){
    $(window).scroll(function() {              
        $('#footer').toggle($(document).scrollTop() > 100);
    });
})​

HTML

<div id="footer">
  <div class="content-wrap">
    <ul class="navigation">
      <li><a href="#about">About</a></li>
      <li><a href="#blog">Blog</a></li>
      <li><a href="#support">Support</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div><!-- content-wrap END -->
</div><!-- footer END -->​

Answer 1

You can do the following which would make use of CSS transitions

jQuery

We want to add or remove a class from the footer depending on the scroll position

$(function(){
    $(window).scroll(function(){  
        if($(document).scrollTop() > 100)
        {    
              $('#footer').addClass("show");
        }
        else
        {
            $('#footer').removeClass("show");
        }
    });
})​

CSS

Then, using CSS, display or hide the footer based on the presence of that show class. We can use css transitions to animate the change

#footer 
{
    background: black;
    width: 100%;
    height: 0px;
    position: fixed;
    z-index:300;
    bottom: 0;
    overflow:none;

   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}
#footer.show
{
    height: 48px;

   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}

As you can see above we are changing the height of the footer when showing it. The overflow:none; stops the contents of the footer from showing when the height is 0.

With this method you can also fade in the footer by setting opacity values, or animate a change in the colour.

JS Fiddle:

http://jsfiddle.net/DigitalBiscuits/3zh6h/5/