1

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?

3
  • 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 clase w-100 que hace justamento esto el 11 ene. 2019 a las 18:06
  • @JheymanMejia Gracias, w-100 es por que está dentro de un div que tiene clase col-sm-4 debería tomar ese width no el de la pantalla. Y Si... quiero que se quede fija mientras se hace scroll. el 11 ene. 2019 a las 18:11
  • prueba con position:sticky yo lo usé para un caso en que quería que la primera fila de una tabla quedara estática con el scroll y me funcionó el 8 abr. 2019 a las 20:18

1 respuesta 1

0

Debes usar media querys para conseguir que en dispositivos móviles se quede fijo en la parte superior.

Siguiendo tu código pero modificando varias líneas, obtuve esto:

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <style>
    .form {
      position: fixed;
      z-index: 1;
    }
    
    @media screen and (max-width: 992px) {
      .form {
        position: relative;
      }
    }
  </style>
</head>

<body>
  <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-lg-3 form">
        <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 class="col-lg-4">

      </div>
      <div class="col-lg-8">
        <h1>Cobertura</h1>
        <div class="card-deck">
          <div class="col-lg-3">
            <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>
          <div class="col-lg-3">
            <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 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>
          <div class="col-lg-3">
            <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 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>
        </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>
  <div class="jumbotron text-center" style="margin-bottom:0">
    <p>Listado de convenios</p>
  </div>
</body>

</html>

1
  • 1
    Como lo estás planteando debería ser min-width en lugar de max-width para vistas móviles. Hay varios temas a cambiar para que se aplique el position:fixed tanto en vista movil como PC el 11 ene. 2019 a las 21:14

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.