twitter bootstrap - ¿Cómo se fija la columna izquierda y se puede desplazar hacia la derecha en Bootstrap 4, sensible?

twitter-bootstrap sticky

Question

Estoy usando Angular 4, Bootstrap 4 e intento implementar un div derecho fijo desplazable y un div izquierdo fijo. Debería ser muy similar a lo que tiene Trulia .

Bootstrap eliminó el complemento Affix jQuery en la versión 4, por lo que este método ya no es válido, recomiendan usar position: sticky, pero no puedo hacerlo funcionar.

¡Por favor ayuda!

index.html

<div class="container-fluid">
<div class="row h-100">
<div class="col-md-6">
<div id="left-container">
<div class="search-property">
<input type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div id="right-container">
<app-home-right></app-home-right>
</div>
</div>
</div>
</div>

style.css

#left-container {
height: 100%;
position: fixed;
width: inherit;
}
#right-container {
position: absolute;
}
.search-property {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
margin-left: 50%;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.border {
border: 1px solid black;
}

Answer 1

No estoy seguro si simplemente desea un diseño con 1 lado fijo, o para que el lado se repare hasta que llegue al pie de página (como Trulia). Aquí hay un diseño simple con el lado izquierdo fijo (Split 50 50).

body, html {
height: 100%;
}
#left {
position: fixed;
top: 0;
bottom: 0;
}

https://www.codeply.com/go/IuOp3nvCpy

Para fijar el lado (o adhesivo) solo en un punto específico, position:sticky no funciona muy bien en todos los navegadores. Usaría un complemento o polyfill como se explica aquí: Cómo usar la posición CSS fija para mantener una barra lateral visible con Bootstrap 4

Actualizar Bootstrap 4.0.0 : la clase de fixed-top ahora está en Bootstrap, que se puede usar en la columna del lado izquierdo para eliminar el CSS adicional que se requería para la position:fixed .

Actualización Bootstrap 4.1 : la clase h-100 ahora está disponible, lo que elimina el CSS adicional que se necesitaba para la height:100% : https://www.codeply.com/go/ySC2l4xcEi

Receptivo : como se menciona en los comentarios, se puede usar una consulta de medios para que el diseño responda: https://www.codeply.com/go/pqzJB4thBY

Relacionado:
columna fija en el lado derecho
¿Cómo crear un diseño de barra lateral fijo con Bootstrap 4?