jquery - Show footer if at bottom of page or page is short else hide -

check out jsfiddle see going on: http://jsfiddle.net/amp3rsand/edwhx/2/

if uncomment second .content div in article see footer hiding should un-hiding when bottom of page. trouble show footer when content shorter viewport when second .content div commented out.

(ie. window.height > document.height right?)

on actual website .content divs replaced different divs unique id's each page couldn't figure out how target them specifically. i'm doing correct way it?

here code people don't want use jsfiddle reason:

html

<article>     <div class="content"></div>     <!--         <div class="content"></div>     --> </article>  <footer>             <ul id="footerlinks">                 <li><a href="#">home</a></li>                 <li><a href="#">contact</a></li>             </ul> </footer> <div id="underfooter"></div> 

css

article {     min-height: 500px;     background: black;     padding: 10px;     margin-bottom: 50px; }  .content {     height:500px;     background: lightgrey;     border: 1px dashed red; }  footer {     position: fixed;     bottom: -50px;     height: 40px;     width: 100%;     margin: 0 auto;     text-align: center;     border-top:2px solid #6ce6d5;     background: white;     z-index: 100; }  #underfooter {     position: fixed;     bottom: -44px;     background: blue;     width: 100%;     height: 40px;     z-index: 90; } 

jquery

$(function(){     $('footer').data('size','hide'); });     $(window).scroll(function(){      if ($(window).scrolltop() + $(window).height() >= $(document).height() - 0)     {         if($('footer').data('size') == 'hide')         {             $('footer').data('size','show');             $('footer').stop().animate({                 bottom:'0px'             },400);             $('#white2').stop().animate({                 bottom:'6px'             },400);         }     }     else     {         if($('footer').data('size') == 'show')         {             $('footer').data('size','hide');             $('footer').stop().animate({                 bottom:'-50px'             },400);             $('#white2').stop().animate({                 bottom:'-44px'             },400);         }       } });     $(document).ready(function() {     if ($(window).height() >= $(document).height() )     {         $('footer').data('size','hide');     }     else     {         $('footer').data('size','big');     } }); 

thanks everyone

see if want. made lot of changes js quite lot me: http://jsfiddle.net/edwhx/3/

js:

$(function(){     $('footer').hide();     if($(document).height() < $(window).height()){         $('footer').show();     }     $(window).resize(function(){         console.log("resized");        if($(document).height() > $(window).height()){            console.log("hide footer now");             $('footer').slideup('slow');         }         else{             $('footer').slidedown('slow');         }     }); });    $(window).scroll(function(){             if ($(window).scrolltop() + $(window).height() >= $(document).height() - 0)     {             $('footer').slidedown('slow');             $('#white2').stop().animate({                 bottom:'6px'             },400);     }     else     {             $('footer').slideup('slow');             $('#white2').stop().animate({                 bottom:'-44px'             },400);     } });  $(document).ready(function() {     if ($(window).height() >= $(document).height() )     {         $('footer').data('size','hide');     }     else     {         $('footer').data('size','show');     } }); 

css changes:

footer {     position: fixed;         bottom:0px;     height: 40px;     width: 100%;     margin: 0 auto;     text-align: center;     border-top:2px solid #6ce6d5;     background: white;     z-index: 100; }