 <p>You could animate the footer with <a href="http://api.jquery.com/fadeIn/" rel="nofollow">fadeIn()</a> and <a href="http://api.jquery.com/fadeOut/" rel="nofollow">fadeOut()</a> jQuery effects.</p> <pre><code>$(window).scroll(function() { if($(document).scrollTop() &gt; 100) $('#footer').fadeIn(); else $('#footer').fadeOut(); }); </code></pre> <p>If you dig deep enough into these effects you will find that both uses <a href="http://api.jquery.com/animate/" rel="nofollow">animate()</a> effect with opacity.</p>