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

Question

Check out my jsFiddle to see what is going on: http://jsfiddle.net/Amp3rsand/EDWHX/2/

If you uncomment the second .content div in the article you will see the footer hiding like it should then un-hiding when you get to the bottom of the page. My trouble is that I would like it to show the footer when the content is shorter than the viewport like when the second .content div is commented out.

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

On my actual website the .content divs are replaced by different divs with unique id's for each page so I couldn't figure out how to target them specifically. Is what I'm doing the correct way to do it?

Here is my code for the people who don't want to use the jsFiddle for some 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

Answer 1

See if this is what you want. Made a lot of changes to your JS which was quite a lot for 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;
}