he implementado el código para Dislay la barra en la parte superior de la pantalla stackoverflow: How to show popup message like in stackoverflow¿Cómo puedo mostrar la barra de "primera vez aquí" como SO y deslizar los otros DIV hacia abajo?
Lo que esto hace es mostrar el div sobre la parte superior de la div en la parte superior de la página. ¿Cómo puedo mostrar el nuevo div "bar" y presionar a los otros hacia abajo? Al igual que lo hace StackOverflow.
Editar: La reacción inmediata a mi código de abajo será la de no utilizar la etiqueta div#removeme y en lugar de proporcionar una margin-bottom. Sin embargo, si va con position:fixed, esto no funcionará ya que se adjunta a la ventana y no al documento.
Esto es lo que hago:
En mi documento html:
<div id="removeme">
<br /><br />
</div>
<div id="header"> This is a floating pane! </div>
<div id="content"> Your content goes here... </div>
El CSS para este panel flotante es:
#header {
position: fixed;
top: 0px;
left: 0px;
text-align: center;
background-color: #FFE6BF;
height: 30px;
border: 1px solid #FFCFA6;
width: 100%;
}
y luego usar jQuery en el <head> tag:
$(document).ready(function() {
$('#header').click(function() {
$('#header').slideUp('fast');
$('#removeme').remove();
});
});
Tengo una etiqueta adicional <div> con id removeme para presionar el contenido hacia abajo cuando el panel flotante es visible y lo elimino cuando el panel flotante está oculto.
No utilice el "position: fixed" propiedad de CSS, intente "absoluta" de: http://www.w3schools.com/css/pr_class_position.asp
posición fija está en relación con su (ventana del navegador) "viewport".
La posición absoluta es relativa a su documento html.
Sin conocer la estructura completa de su html, lo más simple es establecer el margen superior del cuerpo a la altura de su div del mensaje, presionando el contenido de la página hacia abajo. Entonces deberías cambiarlo nuevamente. Lo he hecho como una devolución de llamada para que ocurra después del desvanecimiento, pero si parece demasiado nervioso, puede hacerlo antes del desvanecimiento.
$(document).ready(function() {
$("#message").fadeIn("slow",
function() {
$('body').css('margin-top', $(this).height());
}
);
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow",
function() {
$('body').css('margin-top', 0);
}
);
return false;
});
});
se debe establecer la propiedad CSS posición de la barra de "fijo" continuación, crear un div "relleno" para rellenar la altura de la barra superior. Una div más debajo de esta división div. Y ahí lo tiene, el resto de su página se desplazará, pero su barra se quedará en la parte superior. Si desea que todo se mueva hacia arriba y hacia abajo con su barra, use slideUp tanto en su div de posición fija como en ese relleno. Ambos desaparecerán y el resto de la página se desplazará hacia arriba. Viceversa si quieres mostrar la barra superior.
'absolute' no compensará el resto del contenido de la página. 'relative' will. – eyelidlessness
@Shripad, el @ es una clave más a la izquierda. – BalusC
¡Ups! Lo siento @BalusC. :) –