Estoy intentando que la columna de la izquierda haga scroll junto con la pantalla mientras va bajando. Soy muy piedra para CSS así que le puse un position:fixed
pensando que iba a empezar a desplazarse y lo hizo... pero está detrás de todo ( creo eso se soluciona con z-index
) se hizo completamente al width de la pantalla y no era lo que tenía planeado, debería de conservar las proporciones, y en dispositivos móviles quedarse fijo arriba.
El DIV es <div class="w-100 mw-100" style="position:fixed">
Ver el snippet en pantalla completa
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>LOGO</h1>
<p>Subtitulo</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">AYM</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<div class="w-100 mw-100" style="position:fixed">
<h2 class="text-center">Inicia tu proceso</h2>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">1</span>
</div>
<select class="form-control">
<option disabled selected>Selecciona tu aseguradora</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">2</span>
</div>
<input type="text" class="form-control" placeholder="Ingresa tu número de seguro">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">3</span>
</div>
<input type="file" class="form-control">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">4</span>
</div>
<input type="mail" class="form-control" placeholder="Brindanos tu correo para contactarte">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">No estoy seguro de qué hacen
</label>
<p class="text-muted">Si no te sientes seguro únicamente brindanos tu correo electrónico y con gusto te contactamos</p>
</div>
<button type="button" class="btn btn-dark btn-block">Enviar</button>
<hr class="style18">
<hr class="d-sm-none">
</div>
</div>
<div class="col-sm-8">
<h1>Cobertura</h1>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src=".../100px180/" alt="Imagen correspondiente">
<div class="card-body">
<h5 class="card-title">Cirugía</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src=".../100px180/" alt="Imagen correspondiente">
<div class="card-body">
<h5 class="card-title">Medicamentos</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src=".../100px180/" alt="Imagen correspondiente">
<div class="card-body">
<h5 class="card-title">Recuperación</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<h2>¿QUÉ ES LO QUE HACEMOS?</h2>
<div class="fakeimg">Fake Image</div>
<p>Aquí el choro de cómo se hace</p>
<br>
<h2>¿CÓMO LO HACEMOS?</h2>
<div class="fakeimg">Fake Image</div>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Listado de convenios</p>
</div>
¿Qué puedo hacer para conseguir este objetivo?
la columna de la izquierda haga scroll junto con la pantalla mientras va bajando
No termino de entenderte muy bien. Quieres que esa columna quede fija mientras se hace scroll? Además dice que está al 100% del ancho de la pantalla es porque tienes la clasew-100
que hace justamento estoclase col-sm-4
debería tomar ese width no el de la pantalla. Y Si... quiero que se quede fija mientras se hace scroll.