如果页面底部或页面较短，则显示页脚，否则隐藏 [英] Show footer if at bottom of page or page is short else hide

问题描述

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

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

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

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.

.height> document.height right？）

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

在我的实际网站上。.content divs被每个页面的唯一ID替换为不同的div，所以我无法弄清楚如何具体针对他们。

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?

这里是我的代码，为那些不想使用jsFiddle的人，因为某些原因：

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

感谢大家

推荐答案

看看这是否是你想要的。对你的JS做了很多修改，对我来说是很多的：
http://jsfiddle.net/EDWHX/3/

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更改：

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

这篇关于如果页面底部或页面较短，则显示页脚，否则隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！