¿Cómo hago un diseño de dos columnas, donde la columna de la izquierda es mi menú y está bloqueada (¿pegajosa? ¿arreglada?) para que cuando se desplace verticalmente dependiendo de la altura del contenido en la columna de la derecha, el menú permanezca.
En segundo lugar, supongo que tengo que usar javascript para (vainilla, no jquery), así que haga que las columnas sean redimensionables. con el css usaría 'cursor: col-resize' pero el JS no tengo ni idea.
.row { display: flex; } .column { flex: 50%; padding: 16px; } .one { background-color: tomato; min-height: 100%; } .two { background-color: #33a8ff; height: 5000px; } html, body { height: 100%; margin: 0; } <div class="row"> <div class="column one"> <h2> column #1 </h2> <p>menu items</p> </div> <div class="column two"> <h2>column #2</h2> <p> Some contents in column 2 </p> </div> </div> Here is a fiddle: https://jsfiddle.net/ojx1g64s/
Podrías usar position:sticky . Pero para ver la diferencia, establezca una altura más pequeña en la barra lateral.
Nota:
position: stickyno funcionaría si el padre de una barra lateral, incluso si no es directo, tiene suoverflowestablecido en un valor diferente al predeterminado.
.row { display: flex; } .column { flex: 50%; padding: 16px; } .one { background-color: tomato; position: sticky; top: 0; height: min-content; } .two { background-color: #33a8ff; height: 5000px; } html, body { margin: 0; } <div class="row"> <div class="column one"> <h2> column #1 </h2> <p>menu items</p> </div> <div class="column two"> <h2>column #2</h2> <p> Some contents in column 2 </p> </div> </div>Podrías hacerlo como en mi fragmento a continuación. Ambas columnas tienen height: 100%; , el derecho tiene overflow-y: auto para mostrar una barra de desplazamiento solo si es necesario y desplazar el contenido dentro de esa columna:
* { box-sizing: border-box; } html, body { height: 100%; margin: 0; } .row { display: flex; height: 100%; background-color: #33a8ff; } .column { flex: 50%; padding: 16px; } .one { background-color: tomato; height: 100%; } .two { height: 100%; overflow-y: auto; } <div class="row"> <div class="column one"> <h2> column #1 </h2> <p>menu items</p> </div> <div class="column two"> <h2>column #2</h2> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> <p> Some contents in column 2 </p> </div> </div>