Cómo anclar un elemento al lado izquierdo de la ventana

Question

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?

javascript html css

2

Simone 10 may. 2019 a las 18:26

Answer 1

¿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>

2

Ryan 10 may. 2019 a las 16:17

Answer 2

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:

DEMO EN VIVO

<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>

1

jonathana 10 may. 2019 a las 16:05

Answer 3

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

1

Train 10 may. 2019 a las 15:40

Cómo anclar un elemento al lado izquierdo de la ventana

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript