顯示頁腳如果在頁面或頁面的底部短否則隱藏

Question

看看我的jsfiddle看看是怎麼回事：http://jsfiddle.net/Amp3rsand/EDWHX/2/

如果取消對文章中的第二個。內容的div你會看到頁腳隱藏如它應該隱藏在頁面底部。我的麻煩是，當內容比視口短時，比如當第二個.content div被註釋掉時，我希望它顯示頁腳。

（即window.height> document.height吧？）

在我實際的網站。內容的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'); 
    } 
}); 

謝謝大家

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