Visualizza piè di pagina se in fondo alla pagina o pagina è breve il resto nascondere

Question

controllare il mio jsFiddle per vedere cosa sta succedendo: http://jsfiddle.net/Amp3rsand/EDWHX/2/

Se si rimuove il commento il secondo div .content nell'articolo si vedrà il piè di pagina si nasconde come dovrebbe quindi non nascondersi quando arrivi in ​​fondo alla pagina. Il mio problema è che mi piacerebbe che mostrasse il footer quando il contenuto è più corto della viewport come quando il secondo .content div è commentato.

(es. Window.height> document.height giusto?)

Sul mio sito attuale div .content sono sostituiti da diversi div con ID univoco per ogni pagina di così non riuscivo a capire come bersaglio loro in particolare. È quello che sto facendo il modo corretto per farlo?

Ecco il mio codice per le persone che non vogliono utilizzare il jsFiddle per qualche motivo:

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

Grazie a tutti

Answer 1

Vedere se questo è ciò che si desidera. Ha fatto un sacco di modifiche al JS che era un bel po 'per 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'); 
    } 
}); 

Cambiamenti 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

Ho appena aggiornato il jsfiddle, dovresti usare document.body.offsetHeight per ottenere l'altezza del "contenuto".

Guardate questa risposta: How to get height of entire document with JavaScript?

e controllare il jsfiddle per le modifiche: 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'); } });