Piè di pagina per l'animazione in scorrimento

Question

Attualmente il piè di pagina viene visualizzato una volta che la pagina scorre oltre un punto prestabilito ma vorrebbe farlo svelare mentre l'utente scorre invece di apparire sullo schermo (come al momento).

Sarebbe interessante sapere se può essere raggiunto con le transizioni CSS o le migliori pratiche.

esempio vivo http://jsfiddle.net/robcleaton/3zh6h/

CSS

#footer { 
    background: black; 
    width: 100%; 
    height: 48px; 
    position: fixed; 
    z-index:300; 
    bottom: 0; 
    display: none; 
} 

#footer ul.navigation li { 
    float: left; 
    margin-right: 16px; 
    display: block; 
} 

JS

$(function(){ 
    $(window).scroll(function() {    
     $('#footer').toggle($(document).scrollTop() > 100); 
    }); 
})​ 

HTML

<div id="footer"> 
    <div class="content-wrap"> 
    <ul class="navigation"> 
     <li><a href="#about">About</a></li> 
     <li><a href="#blog">Blog</a></li> 
     <li><a href="#support">Support</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div><!-- content-wrap END --> 
</div><!-- footer END -->​ 

Answer 1

È possibile effettuare le seguenti operazioni che renderebbe l'uso di transizioni CSS

jQuery

Vogliamo aggiungere o rimuovere una classe dal piè di pagina a seconda della posizione di scorrimento

$(function(){ 
    $(window).scroll(function(){ 
     if($(document).scrollTop() > 100) 
     {  
       $('#footer').addClass("show"); 
     } 
     else 
     { 
      $('#footer').removeClass("show"); 
     } 
    }); 
})​ 

CSS

Quindi, utilizzando CSS, visualizzare o nascondere il piè di pagina in base alla presenza di tale classe show. Possiamo usare le transizioni CSS per animare il cambiamento

#footer 
{ 
    background: black; 
    width: 100%; 
    height: 0px; 
    position: fixed; 
    z-index:300; 
    bottom: 0; 
    overflow:none; 

    -moz-transition:all 0.5s ease-in-out; 
    -o-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
    -webkit-transition:all 0.5s ease-in-out; 
} 
#footer.show 
{ 
    height: 48px; 

    -moz-transition:all 0.5s ease-in-out; 
    -o-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
    -webkit-transition:all 0.5s ease-in-out; 
} 

Come potete vedere sopra stiamo cambiando l'altezza del piè di pagina, quando mostrarlo. Il overflow:none; interrompe la visualizzazione del contenuto del footer quando l'altezza è 0.

Con questo metodo è possibile anche dissolvere il piè di pagina impostando i valori di opacità o animare un cambiamento nel colore.

JS Fiddle:

http://jsfiddle.net/DigitalBiscuits/3zh6h/5/

Answer 2

Si potrebbe animare il piè di pagina con fadeIn() e fadeOut() effetti jQuery.

$(window).scroll(function() {   
    if($(document).scrollTop() > 100) 
     $('#footer').fadeIn(); 
    else 
     $('#footer').fadeOut(); 
    }); 

Se si scava abbastanza in profondità in questi effetti troverete che entrambi gli usi animate() effetto con opacità.

Answer 3

ho avuto qualche divertimento a sperimentare con il tuo problema e non ho visto nessun altro provare questo (Fiddle):

$(function() { 
    $(window).scroll(function() { 
     $("#footer").fadeTo("500", $(document).scrollTop()/100); 
    }); 
})​ 

Questa soluzione sarà anche svanire il piè di pagina si chiude se l'utente esegue il backup.

V'è un grave inconveniente di questa soluzione: perché utilizza il metodo fadeTo(), il supporto in IE sta per essere estremamente limitati (in realtà, si romperà nella maggior parte delle versioni di IE - non riesco a ricordare ciò che il il supporto è per 9 e 10). È possibile aggirare questo problema utilizzando una delle decine di plug-in/correzioni per aggiungere supporto in IE per l'animazione della proprietà opacity e modificare di conseguenza questa soluzione (utilizzando animate() anziché fadeTo()).

Fatemi sapere se avete domande. In bocca al lupo! :)

Answer 4

credo che questo dovrebbe essere il modo:

http://jsfiddle.net/gQqLJ/

$(function() { 
    $(window).scroll(function() { 
     if ($(document).scrollTop() > 100) { 

      $('#footer').slideDown(650); 

     }else if($(document).scrollTop() < 100){ 

      $('#footer').fadeOut(500); 
     } 
    }); 
})​;​ 

Answer 5

JQuery & animazioni

per qualcosa di simile, vorrei consigliare utilizzando una combinazione di effetti di scorrimento e svanire. È molto più naturale e quindi non blocca l'utente quando si verifica.

Il violino di lavoro: http://jsfiddle.net/3zh6h/32/

Il frammento di codice in questione (non utilizzato nel violino, ma qui per dimostrare come fare questo con codifica best practice in mente):

jQuery.fn.slideFadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); 
}; 

Best Practices

Per quanto riguarda le migliori pratiche, è possibile trovare un post molto carino sulle animazioni personalizzate e su come scriverle in modo riutilizzabile here.

Non ci sono best practice di "animazione jquery footer" come tali, almeno che io conosca, ma è possibile attingere da siti Web famosi e ben progettati per sapere cosa funziona e cosa no. Esempi di questi non sarebbero buoni, poiché dipende dalla natura e dal contesto del tuo sito web.

CSS

io non vi consiglio le transizioni CSS in quanto le specifiche sono non finalizzato (bozze ufficiali, le discussioni possono essere trovati here).

Inoltre, non sono compatibili cross-browser, in particolare w.r.t. browser più vecchi Ma poi di nuovo, questa è solo la mia opinione.