Come si fa a div apparire dall'alto quando si scorre verso il basso?

Question

Vorrei un div per apparire e scorrere verso il basso una volta scorrere l'intestazione.

Qui è quello che dovrebbe essere simile:

http://www.space.com/11425-photos-supernovas-star-explosions.html

Ecco quello che ho ottenuto finora, ma non sta funzionando.

http://jsfiddle.net/nHnrd/

Answer 1

Avrete bisogno di scoprire l'altezza della testata e la sua posizione sulla pagina poi basta mostrare o nascondere il div a seconda del valore scrollTop utilizzando jQuery.

Ad esempio:

// Get the headers position from the top of the page, plus its own height 
var startY = $('header').position().top + $('header').outerHeight(); 

$(window).scroll(function(){ 
    checkY(); 
}); 

function checkY(){ 
    if($(window).scrollTop() > startY){ 
     $('.fixedDiv').slideDown(); 
    }else{ 
     $('.fixedDiv').slideUp(); 
    } 
} 

// Do this on load just in case the user starts half way down the page 
checkY(); 

Poi ti basta impostare la .fixedDiv a position: fixed: top: 0; a sinistra: 0;

Modifica: Ho aggiunto una funzione di checkY() che è possibile chiamare ogni volta che la pagina viene caricata e anche su scroll. Per prima cosa nasconderlo, basta usare i CSS.

Answer 2

Si potrebbe desiderare di mostrare solo e nascondere il proprio div piuttosto che di classe pseudo E nascondere e mostrare

inizialmente:. $ ("# myDiv") hide(); quindi (su scroll): $ ("# mydiv"). Show();

insieme ciò che si desidera che il div a guardare come vale a dire 0,0 e fissato

Utilizzare il Mi tengo il metodo di semplice!

Answer 3

Ho aggiornato il tuo jsfiddle con qualcosa che puoi provare.

Prova questo:
http://jsfiddle.net/nHnrd/10/

Inoltre, questo articolo è stato utile:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/