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

Question

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

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

（即window.height＆gt; 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;
}

Answer 2

我刚刚更新了jsfiddle，你应该使用document.body.offsetHeight来获取“内容”的高度。

看看这个答案：How to get height of entire document with JavaScript?

并检查jsfiddle的变化：http://jsfiddle.net/juaning/EDWHX/5/

$(document).ready(function() { var body = document.body, html = document.documentElement; console.log(body.offsetHeight >= html.offsetHeight , body.offsetHeight , html.offsetHeight); $('footer').data('size','show'); if (body.offsetHeight >= html.offsetHeight ) { $('footer').data('size','hide'); console.log('hide'); } else { $('footer').data('size','show'); $('footer').stop().animate({ bottom:'0px' },400); $('#white2').stop().animate({ bottom:'6px' },400); console.log('show'); } });