5

私のjsFiddleをチェックして、何が起こっているかを確認してください：http://jsfiddle.net/Amp3rsand/EDWHX/2/

記事の 2 番目の .content div のコメントを外すと、フッターが本来あるべきように非表示になり、ページの下部に到達すると非表示が解除されます。私の問題は、2 番目の .content div がコメント アウトされている場合のように、コンテンツがビューポートよりも短い場合にフッターを表示することです。

(つまり、window.height > document.height ですよね?)

私の実際のウェブサイトでは、.content div はページごとに一意の ID を持つ別の div に置き換えられているため、それらを具体的にターゲットにする方法がわかりませんでした。私がやっていることは正しい方法ですか？

何らかの理由で 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');
    }
});

みんな、ありがとう

4

2 に答える 2

0

「コンテンツ」の高さを取得するには、document.body.offsetHeight を使用する必要があります。

この回答を見てください: 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'); } });

于 2013-08-20T05:22:14.837 に答える