crea una diapositiva div abajo sin empujar el contenido hacia abajo

Question

Tengo una exampe HERE

no estoy seguro de cómo hacer la diapositiva div hacia abajo, pero manteniendo el contenido en la parte superior, como en no deslice hacia abajo cuando el div se desliza hacia abajo.

¿podría ayudarme con esto?

Answer 1

¿Te refieres a algo así?

http://jsfiddle.net/yGZHC/3/

Si es así, utilice position:absolute. De esta forma, la posición del elemento no afecta la posición de otros elementos.

EDITAR: Dependiendo de lo que intente hacer, relative puede ser mejor.

http://jsfiddle.net/yGZHC/5/

Edit2: Y aún mejor que eso, utilizar la altura de forma dinámica para determinar la distancia para mover el contenido. De esta forma, no estás limitado a una altura fija.

http://jsfiddle.net/yGZHC/7/

$('#slidenav').animate({ 
    top: '-'+$(this).height() 
}, 200); 

$('#open a').toggle(
    function(){ 
     $('#slidenav').animate({ 
      top: '0' 
     }, 500); 
    }, 
    function(){ 
     $('#slidenav').animate({ 
      top: '-4'+$(this).height() 
     }, 500); 
}); 

Answer 2

Lo arreglé para lo que creo que estás pidiendo.

http://jsfiddle.net/yGZHC/2/

Lo primero es lo primero, mueva el contenido a continuación las cosas que quieres estar en la cima:

<div id="open"> 
    <a href="#">slide</a> 
</div> 
<div id="holder"> 
    <div id="header"> 
    <h1>TITLE HERE</h1> 
    </div> 
    <div id="contact"> 
    </div> 
</div> 
<div id="slidenav"> 
.... 

Entonces, justo golpearse la slidenav un poco más para compensar. Incluso podría ocultar el div por completo hasta que haga clic en el botón mostrar si lo desea.

$(document).ready(function() { 
    $('#slidenav').animate({ 
    marginTop: '-480px' 
    }, 200); 
    $('#open a').toggle(function(){ 
    $('#slidenav').animate({ 
     marginTop: '0' 
    }, 500); 
    }, 
    function(){ 
    $('#slidenav').animate({ 
     marginTop: '-380px' 
    }, 500); 
    }); 
});