¿Cómo hacer que Div aparezca desde la parte superior cuando se desplaza hacia abajo?

Question

Me gustaría que aparezca div y deslice hacia abajo una vez que pase el cursor por el encabezado.

Esto es lo que debe ser similar:

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

Aquí es lo que tengo hasta ahora, pero no está funcionando.

http://jsfiddle.net/nHnrd/

Answer 1

Tendrá que averiguar la altura de la cabecera y de su posición en la página a continuación, sólo mostrar u ocultar el div en función del valor scrollTop usando jQuery.

Por ejemplo:

// 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(); 

A continuación, sólo tendrá que establecer el .fixedDiv a la posición: fijo: top: 0; izquierda: 0;

Edit: Agregué una función checkY() a la que puede llamar cada vez que se carga la página y también en desplazamiento. Para ocultarlo inicialmente, solo usa CSS.

Answer 2

Es posible que desee mostrar y ocultar simplemente el div en lugar de pseudo clase y ocultar y mostrar

inicialmente:. $ ("# mydiv") hide(); luego (en desplazamiento): $ ("# mydiv"). Show();

conjunto lo que quiere que su div para que parezca es decir, 0,0 y fija

Uso del Mantengo Método sencillo!

Answer 3

He actualizado tu jsfiddle con algo que puedes probar.

Prueba esto:
http://jsfiddle.net/nHnrd/10/

Además, este artículo ha sido útil:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/