Tengo una página con dos elementos, un encabezado y un pie de página.
html,
body,
main {
width: 100%;
height: 100%;
background: #888;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 20%;
background: rgba(0, 255, 0, .1);
}
footer {
width: 10000px;
height: 80%;
background: rgba(255, 0, 0, .1);
}
<main>
<header></header>
<footer></footer>
</main>
Consulte este codepen para ver un ejemplo en vivo.
Cuando desplazo la ventana horizontalmente, necesito que el encabezado esté siempre centrado en el centro de la pantalla.
No puedo usar position: fixed
porque necesito que este elemento esté en el flujo de la página.
position: sticky
hace exactamente lo que necesito, pero desafortunadamente no puedo usarlo porque el ancho del elemento principal es el mismo que el ancho de la ventana gráfica. Si configuro el ancho principal en un ancho que es más grande que la ventana gráfica en sí, logro lo que quiero, pero espero una mejor solución.
Prefiero una solución solo para CSS, pero estoy abierto a una solución JS.
Una de las muchas cosas que he probado hasta ahora es escuchar el evento de desplazamiento y agregar un margen restante al elemento igual a window.scrollX
, con la idea de que permanecería anclado en el borde izquierdo de la ventana. Sin embargo, eso no funciona realmente, no estoy seguro de por qué.
En el ejemplo, si intenta establecer position: sticky; left: 0;
en el encabezado, luego le da un width: 10000px;
al elemento principal, verá mi diseño deseado.
¿Es posible lograr este mismo diseño, pero sin tener que establecer un ancho?
3 respuestas
¿El pie de página debe tener un width
codificado? Parece que es donde tendrás más problemas. Si simplemente tiene contenido en el pie de página que debe mostrarse y puede ser más ancho que el encabezado, entonces recomendaría utilizar una solución como la siguiente:
html, body, main {
width: 100%;
height: 100%;
background: #888;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 20%;
background: rgba(0,255,0,.1);
}
footer {
display: flex;
overflow-x: scroll;
height: 80%;
background: rgba(255,0,0,.1);
}
h1 {
margin-left: 70px;
}
<main>
<header>Header</header>
<footer>
<h1>Content</h1>
<h1>Content</h1>
<h1>Content</h1>
<h1>Content</h1>
<h1>Content</h1>
<h1>Content</h1>
<h1>Content</h1>
<h1>Content</h1>
<h1>Content</h1>
<h1>Content</h1>
</footer>
</main>
Su solución de escribir la función de JavaScript que manejará el valor marginLeft
del encabezado fue correcta.
No sé por qué no funcionó para usted porque no nos mostró su código JS, pero aquí hay una forma de lograrlo:
<script>
window.addEventListener("scroll", function () {
var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
document.getElementById("myheader").style.marginLeft = left.toString() + "px";
}, false);
</script>
Cambie el encabezado CSS a esto
header {
width: 100%;
height: 20%;
background: rgba(0,255,0,.1);
position: fixed;
float-left: auto;
float-right: auto;
}
Los elementos Fixed
son relativos al documento html y no al contenedor principal, y no se ven afectados por el desplazamiento. Float left and right auto
céntralo en la página.
Si desea que footer
vaya sobre header
en el desplazamiento vertical, debe usar la propiedad z-index
.
footer {
width: 10000px;
height: 80%;
background: rgba(255,0,0,.1);
position: fixed;
z-index: 1
}
También puede tocar entre fixed
y absolute
absoluto es relativo al contenedor principal a diferencia de fixed
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.