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

Question

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

如果您取消注释文章中的第二个.content div,您将看到页脚隐藏,然后当您到达页面底部时应该取消隐藏.我的麻烦是,当内容比视口短时,我希望它显示页脚,就像第二个.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;
}