jquery - 如果在页面底部或页面较短则显示页脚，否则隐藏

Question

查看我的 jsFiddle 看看发生了什么:http://jsfiddle.net/Amp3rsand/EDWHX/2/

如果您取消注释文章中的第二个 .content div，您将看到页脚像它应该隐藏的那样隐藏，然后在您到达页面底部时取消隐藏。我的麻烦是，当内容比视口(viewport)短时，我希望它显示页脚，就像第二个 .content div 被注释掉时一样。

(即 window.height > document.height 对吗？)

在我实际的网站上，.content div 被不同的 div 替换，每个页面都有唯一的 id，所以我不知道如何专门定位它们。我正在做的事情是正确的做法吗？

这是我为那些出于某种原因不想使用 jsFiddle 的人编写的代码:

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');
    }
});

谢谢大家

Answer 1

看看这是不是你想要的。对您的 JS 进行了很多更改，这对我来说是很多: 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 更改:

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;
}