posicionar - CSS: hacer que el contenido aparezca debajo de un elemento DIV fijo
position fixed scroll (8)
Mi intención es crear un menú en la parte superior de la página que permanezca en la parte superior de la página, incluso cuando el usuario se desplace (como la función reciente de Gmail que tiene los botones utilizados comúnmente desplazándose hacia abajo con el usuario para que pueda funcionar operaciones en mensajes sin tener que desplazarse hacia la parte superior de la página).
También me gustaría configurar el contenido debajo de dicho menú para que aparezca debajo de él, en este momento aparece detrás de él.
Estoy buscando algo como esto:
+________________________+
| MENU | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
| CONTENT BEGINS |
| HERE |
| |
| |
| |
| |
| |
| |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+ <--- Bottom of page.
Espero tener el menú en la parte superior que nunca se mueve y que se mantiene en la parte superior de la página, incluso cuando el usuario se desplaza hacia abajo. También estoy buscando que el contenido principal comience debajo del menú cuando el usuario está en la parte superior de la página, pero cuando el usuario se desplaza hacia abajo, no importa si el menú va más allá del contenido.
Resumen:
- Deseo tener un menú de posición fijo en la parte superior de la página que sigue al usuario cuando se desplaza.
- El contenido debe aparecer DEBAJO del menú ÚNICAMENTE cuando el usuario está en la parte superior de la página.
- Cuando el usuario se desplaza hacia abajo, el menú puede superponerse al contenido.
¿Alguien puede explicar cómo lograr esto?
Gracias.
ACTUALIZAR:
Código CSS:
#floatingMenu{
clear: both;
position: fixed;
width: 85%;
background-color: #78AB46;
top: 5px;
}
Código HTML:
<div id="floatingMenu">
<a href="http://www.google.com">Test 1</a>
<a href="http://www.google.com">Test 2</a>
<a href="http://www.google.com">Test 3</a>
</div>
En este momento, puedo hacer que el menú aparezca en la parte superior de la página y centrado al colocarlo dentro de mi container div . Sin embargo, el contenido va detrás del menú. Lo he dejado clear: both; y esto no ha ayudado.
Acabo de agregar un relleno al Div debajo del navegador. Espero eso ayude. Soy nuevo en esto. DO:
#nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0 auto;
padding: 0;
background: url(../css/patterns/black_denim.png);
z-index: 9999;
}
#container {
display: block;
padding: 6em 0 3em;
}
Acabo de tener este problema, y esta fue mi solución:
#floatingMenu + * {
margin-top: 35px;
}
Ajuste para la altura de su flotante Menú. Si no está seguro de que sea un seguimiento div, entonces puede usar * lugar de div . Esto es todo válido CSS2.
Deberías probar ese Pen . Espero que esto te ayude e incluso darle más funcionalidad para usar navegación fija.
1. clear:both; no necesitas usar clear
Envuelva los contenidos del menú con otro div:
<div id="floatingMenu">
<div>
<a href="http://www.google.com">Test 1</a>
<a href="http://www.google.com">Test 2</a>
<a href="http://www.google.com">Test 3</a>
</div>
</div>
Y el CSS:
#floatingMenu {
clear: both;
position: fixed;
width: 100%;
height: 30px;
background-color: #78AB46;
top: 5px;
}
#floatingMenu > div {
margin: auto;
text-align: center;
}
Y sobre su página debajo del menú, también puede darle un relleno:
#content {
padding-top: 35px; /* top 5px plus height 30px */
}
Habiendo luchado con esto y desaprovechado algunas de las soluciones "pirateadas", encontré que esto es útil y limpio:
#floatingMenu{
position: sticky;
top: 0;
}
Lo que necesitas es un div espacio adicional (por lo que entiendo tu pregunta).
Este div se colocará entre el menú y el contenido y tendrá la misma altura que el menú div, incluidos los pads.
HTML
<div id="fixed-menu">
Navigation options or whatever.
</div>
<div class="spacer">
</div>
<div id="content">
Content.
</div>
CSS
#fixed-menu
{
position: fixed;
width: 100%;
height: 75px;
background-color: #f00;
padding: 10px;
}
.spacer
{
width: 100%;
height: 95px;
}
Vea mi ejemplo here .
Esto funciona compensando el espacio que habría estado ocupado por la div nav, pero como tiene position: fixed; ha sido sacado del flujo de documentos.
El método preferido para lograr este efecto es usar margin-top: 95px;/*your nav height*/ en su contenedor de contenido.
Para aquellos que sugieren el uso de margin-top o padding-top para mover la división principal por debajo del menú fijo, no parece que lo esté probando por completo.
Si establece un margen o relleno, se desplazará con la página y perderá líneas - vaya a probar esta página
Se ve bien, ¿no? Resalte una palabra en la línea visible inferior y presione página abajo: la línea con la palabra resaltada y algunas otras líneas se desplazarán debajo de la división fija.
Margin-top o top acolchado posicionará la división principal debajo de la división fija, pero todo cae en su cara cuando baja la página o hace clic en la barra de desplazamiento para desplazarse por el alto de una ventana de la página.
El mismo problema si coloca la página hacia arriba, las líneas se "caen" en la parte inferior del puerto de visualización.
¿Alguien tiene una solución real para ESTE problema?
Sé cómo ubicar las cosas, eso es bastante fácil si conoces los conceptos básicos sobre los márgenes, el relleno, etc., pero ¿cómo evitas la pérdida de líneas al desplazarte?
He visto muchos ejemplos de lo que se dice que son páginas que funcionan correctamente con divisiones fijas en la parte superior, ¡pero no funcionan! Todos ellos tienen problemas de desplazamiento.
Me he encontrado con que algunas páginas parecen funcionar, pero si la división fija se hace más alta, las líneas se perderán. Creo que sé por qué parecen funcionar.
Piense en términos de cómo se desplaza el texto en una página totalmente normal (sin formateo sofisticado). ¿Ves la línea de fondo cuando te desplazas hacia arriba o ves la siguiente línea, la inferior se ha desplazado desde la parte superior de la ventana gráfica?
Respuesta: verá desplazarse la línea inferior para convertirse en la línea superior.
Las páginas de menú fijo que parecen funcionar realmente no. Desplázalas y la línea inferior se desplaza fuera de la ventana gráfica, pero dado que la siguiente línea es visible, parece que la división fija funciona, pero sabemos mejor, ¿verdad?
Si la división fija es más alta que la altura de una línea de texto, fallan y las líneas se pierden.
Las únicas páginas que he visto que realmente funcionan correctamente están en sitios como Yahoo y no tengo el tiempo, ni la inclinación, para profundizar en lo que es mucho CSS, HTML y JavaScript en las páginas para obtener al corazón de la cuestión
Entonces, vaya a esa página y vea si puede hacer cambios ("inspeccionar" los elementos y hacer cambios a las reglas de CSS) para solucionar los problemas de desplazamiento.
Si puedes, vuelve y comparte tu descubrimiento con el mundo.
Mi página es un buen lugar para ver lo que se necesita para poder arreglar una división en la parte superior, centrarla (y la división principal) y restringirla a un ancho máximo. Puede ayudar a algunos de ustedes, pero lo siento, no tengo una solución para el problema de desplazamiento
Juega con la altura de la división de arreglos: hazlo lo suficientemente corto para que solo se muestre una línea y luego juega con el desplazamiento. Luego haga que sea lo suficientemente grande para dos líneas y luego tres y juegue con el desplazamiento. Verás los problemas.
Aquí hay una página que se supone que funciona pero no lo hace, lea el último comentario: describen el problema de otra manera, pero es el mismo problema
Acabo de probar la página nuevamente en Chrome y parece funcionar bastante satisfactoriamente. Con FF, el problema existe. No he intentado IE otra vez, todavía.
Entonces, ¿qué es diferente con FF?
Aquí hay una página en cNet que funciona con chrome y ff, entonces, ¿qué están haciendo?
Más pruebas con Chrome muestran que no muestra completamente la línea inferior cuando se desplaza. Solo una parte de la línea que estaba en la parte inferior es visible cuando su desplazamiento, por lo tanto, aún necesita una solución.
Si la altura de su menú es variable (por capacidad de respuesta o porque está cargada dinámicamente), puede establecer el margen superior donde termina el div fijo. Por ejemplo:
CSS
.fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
Javascript
$(document).ready(function() {
var contentPlacement = $(''#header'').position().top + $(''#header'').height();
$(''#content'').css(''margin-top'',contentPlacement);
});
HTML
...
<div id="header" class="fixed-header"></div>
<div id="content">...</div>
...
Aquí hay un violín ( https://jsfiddle.net/632k9xkv/5/ ) que va un poco más allá con un menú de navegación fijo y un encabezado en un intento por hacer de esto una muestra útil.