Estoy usando Angular 4, Bootstrap 4 y tratando de implementar un fijo de desplazamiento a la derecha div y una fija a la izquierda div. Se debe muy similar a lo que Trulia ha.

Bootstrap cayó el Afijo plugin de jQuery en la versión 4 por lo que este método ya no es válido, se recomienda el uso de la posición: pegajoso, pero no puedo conseguir que funcione.

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>

estilo.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;
}

OriginalEl autor Isak La Fleur | 2017-05-20

1 Comentario

  1. 5

    No estoy seguro de si simplemente quieres un diseño con 1 lateral fijo, o en el lado fijo hasta que se alcanza el pie de página (como Trulia). Aquí está un diseño simple, con fijo lateral izquierdo (División 50 50).

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

    https://www.codeply.com/go/IuOp3nvCpyCómo columna de la izquierda fija y derecho desplazable en Bootstrap 4, sensible?

    Para hacer que la parte fija (o pegajoso) sólo en un punto específico, position:sticky no funciona muy bien en todos los navegadores. Yo uso un plugin o relleno como se explica aquí: Cómo usar CSS posición pegajosa para mantener una barra lateral visible con Bootstrap 4

    Actualización de Bootstrap 4.0.0 – El fixed-top clase es ahora en Bootstrap que puede ser utilizado en el lado izquierdo de la columna para eliminar el css extra que se requiere para position:fixed.

    Actualización de Bootstrap 4.1 – El h-100 clase ya está disponible, lo cual elimina el CSS extra que se necesita para height:100%: https://www.codeply.com/go/ySC2l4xcEi

    Sensible – Como se ha mencionado en los comentarios, una consulta de medios de comunicación puede ser utilizado para hacer el diseño responsive: https://www.codeply.com/go/pqzJB4thBY


    Relacionado con:

    fijo col en el lado derecho

    Cómo crear un fijo de la barra lateral de diseño con Bootstrap 4?

    Voy a tener un formulario de búsqueda en la izquierda y necesito tener este sensible (en la parte superior de la derecha div en el móvil). ¿Cómo puedo hacer eso?
    Utilizar la cuadrícula de clases en las columnas y una consulta de medios para aplicar la fija en grandes anchos como esto: codeply.com/go/pqzJB4thBY
    que funcionó! Gracias!

    OriginalEl autor Zim

Dejar respuesta

Please enter your comment!
Please enter your name here