es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Dos columnas fijas que contienen una caja de desplazamiento con flexbox no funcionan.

14 Jul, 2023 Programación

Estoy teniendo problemas para que mi configuración de dos columnas flexbox funcione. Básicamente, quiero que la columna izquierda se mantenga fija mientras se desplaza hacia abajo la columna derecha y que la barra de desplazamiento termine en el mismo punto exacto. También debería poder plegarse, como se muestra en el siguiente ejemplo.

Se supone que debe sustituir esta solución que hice usando una cuadrícula regular, que lamentablemente ya no puedo utilizar.

Puedes ver mi progreso actual abajo. Realmente no puedo entender qué hacer a partir de aquí. Como soy novato, esperaba que ustedes supieran.

<section class="page-width">

<div class="wrapper">
<aside class="aside aside-1"><img width="100%" src="https://cdn.shopify.com/s/files/1/0044/2852/9698/files/242370040_4238706352865614_2798039132201744827_n.jpg">Aside 1</aside>
  <aside class="aside aside-2">
  Aside 2
  </aside>
</div>
</section>

.wrapper {
  display: flex;
  flex-flow: row wrap;
  overflow: auto;
  gap: 2em;
  justify-content: flex-start;
  height: auto;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.aside-1 {
  position: -webkit-sticky;
  position: sticky;
  background: gold;
  height: auto;
  top: 0;
  align-self: flex-start;
}

.aside-2 {
  background: hotpink;
  height: 900px;
  top: 0;
}

@media all and (min-width: 300px) {
  .aside { flex: 1 0 0; }
}

He revisado el foro sin realmente encontrar lo que necesito y espero que alguien pueda ayudarme. ¡Muchas gracias!

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    Basado en el código proporcionado, parece que la propiedad position: sticky; se aplica correctamente a la primera columna. Sin embargo, se necesitan algunos ajustes para lograr el resultado deseado.

    En primer lugar, se debe eliminar la propiedad height: auto; de la clase .aside-1, ya que crea espacio innecesario debajo de la columna.

    En segundo lugar, se debe agregar align-items: flex-start; a la clase .wrapper, para asegurarse de que las dos columnas estén alineadas en la parte superior.

    En tercer lugar, para hacer que la segunda columna se desplace junto con la primera, se debe eliminar la propiedad overflow: auto; de la clase .wrapper y aplicarla a la clase .aside-2 en su lugar. Además, se debe eliminar la propiedad top: 0; de la clase .aside-2, ya que provoca que la columna se superponga con la primera.

    Por último, para hacer que la primera columna sea plegable, se puede agregar un botón o un enlace a la página que active una función de JavaScript para ocultar/mostrar la columna. Aquí tienes un ejemplo de cómo lograr esto:

    <section class="page-width">
  <button onclick="toggleAside()">Alternar Aside</button>
  <div class="wrapper">
    <aside class="aside aside-1"><img width="100%" src="https://cdn.shopify.com/s/files/1/0044/2852/9698/files/242370040_4238706352865614_2798039132201744827_n.jpg"> Aside 1</aside>
    <aside class="aside aside-2">Aside 2</aside>
  </div>
</section>

<script>
  function toggleAside() {
    var aside = document.querySelector('.aside-1');
    if (aside.style.display === 'none') {
      aside.style.display = 'flex';
    } else {
      aside.style.display = 'none';
    }
  }
</script>

    Este código agrega un botón a la página que llama a la función toggleAside() cuando se hace clic en él. La función obtiene una referencia a la primera columna utilizando document.querySelector('.aside-1'), verifica su valor de visualización actual y lo alterna entre none (para ocultar la columna) y flex (para mostrarla nuevamente).

    Con estos ajustes, el código debería funcionar como se desea.

Comments are closed.